Getting TypeError: this.props is undefined on ReactJs

Question

I am trying to do the tutorial: https://facebook.github.io/react/docs/tutorial.html

import React, { PropTypes } from 'react'; import classnames from 'classnames'; import styles from './CommentBox.css'; import withStyles from '../../decorators/withStyles'; import Link from '../../utils/Link'; import $ from 'jquery';  @withStyles(styles) class CommentBox extends React.Component {      constructor() {         super();         this.state = {data: []};     }      loadCommentsFromServer() {         $.ajax({             url: this.props.url,             dataType: 'json',             cache: false,             success: function(data) {                 this.setState({data: data});             }.bind(this),             error: function(xhr, status, err) {                 console.error(this.props.url, status, err.toString());             }.bind(this)         })     }      componentDidMount() {         this.loadCommentsFromServer();         setInterval(this.loadCommentsFromServer, this.props.pollInterval);     }      render() {          let url="/public/comments.json"          return (             <div className="commentBox">                 <h1>Comments</h1>                 <CommentList data={this.state.data} />                 <CommentForm />             </div>         );     }  }  class CommentList extends React.Component {      render() {          let data = this.props.data          var commentNodes = data.map(function (comment) {           return (             <Comment author={comment.author}>               {comment.text}             </Comment>           );         });          return (           <div className="commentList">             {commentNodes}           </div>         );     } };  class Comment extends React.Component {     render() {         return(             <div className="comment">             <h2 className="commentAuthor">               {this.props.author}             </h2>             {this.props.children}           </div>         );     } }  class CommentForm extends React.Component {   render() {     return (       <div className="commentForm">         Hello, world! I am a CommentForm.       </div>     );   } };  export default CommentBox; 

However, the tutorial is a bit outdated and I am using React 0.14-rc1 with ES6 syntax. I have tried my best to follow the tutorial and implementing it the 0.14 way. Was able to get to this point but now getting the error:

TypeError: this.props is undefined 

Could not figure out the issue. Any idea why? Thanks

Answer 1

When using React and ES6 classes React won't auto bind functions that is declared on your class.

Therefore either use this.loadCommentsFromServer.bind(this) or use arrow functions

loadCommentsFromServer = () => {}