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.

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
– Brett DeWoody, Commented Feb 15, 2015 at 7:18
@BrettDeWoody REALLY a great example for a beginner like me. Thank you! :) — hudidit
– hudidit, Commented Feb 19, 2015 at 15:50
I thought exactly the same thing, thanks for your post :) :) — Rocklan
– Rocklan, Commented Dec 14, 2015 at 4:15

JohnT · Accepted Answer · 2015-02-15 07:53:43Z

11

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.

answered Feb 15, 2015 at 7:53

JohnT

1571 silver badge3 bronze badges

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

1 Comment

hudidit Over a year ago

Thank you! I thought React would do some magic with the url attribute and get the data... totally wrong... Thank you for your tip. I get it now :) Really should've read through the article before asking a question.

Brett DeWoody · Accepted Answer · 2015-02-19 16:07:14Z

5

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

answered Feb 19, 2015 at 16:07

Brett DeWoody

63.3k31 gold badges145 silver badges192 bronze badges

1 Comment

CompanyDroneFromSector7G Over a year ago

Good example of using a jQuery ajax call with React. Thanks.

Collectives™ on Stack Overflow

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

2 Answers 2

1 Comment

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related