Refactoring React Component to ES6. Getting error in Chrome and Firefox

Question

I have refactored the following component to ES6 and I am using the latest version of BabelJS. When I run webpack everything compiles with no issues the problems is I am getting the following error in the console In

Firefox 42.0 i get the following Error

    mutating the [[Prototype]] of an object will cause your code to run very slowly; instead create the object with the correct initial 
[[Prototype]] value using Object.create bundle.js:19697:416
    TypeError: _react2.default.propTypes is undefined

In Google Chrome the following error is

Uncaught TypeError: Cannot read property 'string' of undefined

Here is the following component I am not sure what I am missing or what I have done wrong. I have been troubleshooting this for the last few days now.

import React from "react";
var $ = require('jquery');

class ChatList extends React.Component{

  getInitialState(){
    return{
      chat:[]
    }
  }


  getChats (){
    $ajax({
      url: this.props.URL,
      type:'GET',
      beforeSend: function(request){
        request.setRequestHeader("X-Parse-Application-Id","AppID");
        request.setRequestHeader("X-Parse-REST-API-Key","AppKEY");
        request.setRequestHeader("Content-Type","application/json");
      },
      error: function(data){
        console.log('There was an error in getting the chats');
      },
      success:function(data){
        if(this.isMounted()){
          this.setState({
            chats: data.results
          });
        }
      }.bind(this)
    })
  }

  ComponentDidMount (){
    this.interval = setInterval(function(){
      this.getCharts();
    }.bind(this),1000)
  }

  ComponentWillUnmount(){
    clearInterval(this.interval);
  }
  render(){

    var list = this.state.chats.map((item,index)=>{
        return <li className = "list-group-item" key={item.objectId}> {item.text} </li>
    })

    return (
      <ul className="list-group">
        {list}
      </ul>
    )
  }
}

ChatList.PropTypes = {
  URL: props.string.isRequired
};

ChatList.defaultProps = {
  URL: 'https://api.parse.com/1/classes/chat/'
};


export default ChatList;

poke · Accepted Answer · 2015-11-09 22:58:47Z

2

A few issues I noticed, which hopefully solves this issue.

Since you are using ES6 class to define React components, getInitialState cannot be used like that. Instead you should have:
```
constructor(props) {
    super(props);
    this.state = { chat: [] };
}
```
You have ChatList.PropTypes = … instead it should be ChatList.propTypes (small p) and props is undefined, hence your error about 'cannot access property string of undefined'
```
ChatList.propTypes = {
    URL: React.PropTypes.string.isRequired
};
```

edited Nov 9, 2015 at 22:58

poke

392k80 gold badges596 silver badges632 bronze badges

answered Nov 9, 2015 at 22:42

luanped

3,1982 gold badges30 silver badges40 bronze badges

Sign up to request clarification or add additional context in comments.

6 Comments

stargatesg1 Over a year ago

I made modifications to the original code with the new suggestions above but the console throws the following error. TypeError: Super expression must either be null or a function, not undefined

luanped Over a year ago

Which version of React are you using? If possible, can you upgrade to the latest version ??

stargatesg1 Over a year ago

I am using React 0.14.2 and ReactDOM v0.14.2. I am also using the latest version of BabelJS

stargatesg1 Over a year ago

I solved the problem. I deleted all my Node modules reinstalled react react-dom everything worked. Thanks everybody for all the help

luanped Over a year ago

@stargatesg1 that's good to hear, I suspect that although your package.json said 14.2, you still had an older version of react in the node_modules causing the error you saw about "Super expression", deleting and reinstalling ensured you are in the latest version.

|

Ashley 'CptLemming' Wilson · Accepted Answer · 2015-11-09 22:40:23Z

0

Have you defined the props variable anywhere, as this appears to be your issue? React prop types are available on React.PropTypes.

Can you try this:

ChatList.PropTypes = {
  URL: React.PropTypes.string.isRequired
};

answered Nov 9, 2015 at 22:40

Ashley 'CptLemming' Wilson

9,6222 gold badges35 silver badges36 bronze badges

Collectives™ on Stack Overflow

Refactoring React Component to ES6. Getting error in Chrome and Firefox

2 Answers 2

6 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

6 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related