ReactJS not fetching data from server when using 'url' attribute

Question

I'm a beginner of ReactJS and just starting with the example code on React's official site. When I'm trying the code in section 'Fetching from the server', I can't get it to work.

I've tried both relative path

React.render(
  <CommentBox url="../data/data.json" />,
  document.getElementById('content')
);

and absolute path

React.render(
  <CommentBox url="http://localhost/path/to/data.json" />,
  document.getElementById('content')
);

But none of them has run correctly. When I checked out the Network panel in Chrome dev tool, I saw the page didn't even send the request for data.json. Thus I got an error of Cannot read property 'comments' of undefined.

more code:

var Comment = React.createClass({
  render: function() {
    return (
      <div className="comment">
        from {this.props.author} <br/>
        {this.props.children}
      </div>
    );
  }
});

var CommentList = React.createClass({
  render: function() {
    var commentNodes = this.props.comments.map(function(comment){
      return (
        <Comment author={comment.author}>
          {comment.text}
        </Comment>
      );
    });
    return (
    <div className="comment-list">
      {commentNodes}
    </div>
    );
  }
});

var CommentForm = React.createClass({
  render: function() {
    return (
      <div className="comment-form">
        Hello, I am a comment form.
      </div>
    );
  }
});

var CommentBox = React.createClass({
  render: function() {
    return (
      <div className="comment-box">
        <h1>Comments</h1>
        <CommentList comments={this.props.data.comments} />
        <CommentForm />
      </div>
    );
  }
});

// ==========  This won't work  ===========
// React.render(
//   <CommentBox url="./data/data.json" />,
//   document.getElementById('content')
// );

// =========== This works. ===========
$.ajax({
  type: "GET",
  url: "./data/data.json",
  dataType: "json",
}).done(function(res){
  React.render(
    <CommentBox data={res} />,
    document.getElementById('content')
  );
});

Any kind of help will be appreciated.

Thanks.

Answer 1

A little bit further down the page in that React Tutorial, they do an AJAX request in the componentDidMount property of the CommentBox React class.

You need to make an AJAX GET request for the data you want in the componentDidMount function in your CommentBox class.

Answer 2

The React docs recommend performing a GET request in componentDidMount() and storing the data in state.

First, initialize the data variables:

getInitialState: function() {
  return {
    dataVar1: ''
  };
}

Then fetch the data using $.get():

componentDidMount: function() {
  $.get('URL-TO-FETCH-DATA-FROM', function(result) {
    if (this.isMounted()) {
      this.setState({
        dataVar1: result
      });
    }
  }.bind(this));
}

where $.get is the jQuery AJAX shorthand function. In render() the data can then be displayed:

render: function() {
  return (
    <div>
      {this.state.dataVar1}
    </div>
  );
}