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.propsments.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.dataments} />
        <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.

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.

• javascript
• reactjs

• 2 Can you share more of your code? Are you making an GET request in your component to retrieve the JSON data? Here's a great example of how to retrieve data from the server. – Brett DeWoody Commented Feb 15, 2015 at 7:18
• @BrettDeWoody REALLY a great example for a beginner like me. Thank you! :) – hudidit Commented Feb 19, 2015 at 15:50
• I thought exactly the same thing, thanks for your post :) :) – Rocklan Commented Dec 14, 2015 at 4:15
• This is a "me too" comment - thanks :) – CompanyDroneFromSector7G Commented Feb 2, 2017 at 13:47

2 Answers 2

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.

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>
  );
}