reactjs - How to load AJAX in react

Question

Im trying to get my json result into my react code

The code looks like the following

_getComments() {

 const commentList = "AJAX JSON GOES HERE"

return commentList.map((comment) => {
  return ( 
           <Comment
           author={comment.author}
           body={comment.body}
           avatarUrl={comment.avatarUrl}
           key={comment.id} />);
  });
}

How do i fetch AJAX into this?

Answer 1

First, to fetch the data using AJAX, you have a few options:

• The Fetch API, which will work out of the box in some browsers (you can use a polyfill to get it working in other browsers as well). See this answer for an example implementation.
• A library for data fetching (which generally work in all modern browsers). Facebook recommends the following:
  • superagent
  • reqwest
  • react-ajax
  • axios
  • request

Next, you need to use it somewhere in your React component. Where and how you do this will depend on your specific application and component, but generally I think there's two scenarios to consider:

1. Fetching initial data (e.g. a list of users).
2. Fetching data in response to some user interaction (e.g. clicking a button to add more users).

Fetching initial data should be done in the life-cycle method componentDidMount(). From the React Docs:

var UserGist = React.createClass({
  getInitialState: function() {
    return {
      username: '',
      lastGistUrl: ''
    };
  },

  componentDidMount: function() {
    this.serverRequest = $.get(this.props.source, function (result) {
      var lastGist = result[0];
      this.setState({
        username: lastGist.owner.login,
        lastGistUrl: lastGist.html_url
      });
    }.bind(this));
  },

  componentWillUnmount: function() {
    this.serverRequest.abort();
  },

  render: function() {
    return (
      <div>
        {this.state.username}'s last gist is
        <a href={this.state.lastGistUrl}>here</a>.
      </div>
    );
  }
});

ReactDOM.render(
  <UserGist source="https://api.github.com/users/octocat/gists" />,
  mountNode
);

Here they use jQuery to fetch the data. While that works just fine, it's probably not a good idea to use such a big library (in terms of size) to perform such a small task.

Fetching data in response to e.g. an action can be done like this:

var UserGist = React.createClass({
  getInitialState: function() {
    return {
      users: []
    };
  },

  componentWillUnmount: function() {
    this.serverRequest && this.serverRequest.abort();
  },

  fetchNewUser: function () {
    this.serverRequest = $.get(this.props.source, function (result) {
      var lastGist = result[0];
      var users = this.state.users
      users.push(lastGist.owner.login)
      this.setState({ users });
    }.bind(this));
  },

  render: function() {
    return (
      <div>
        {this.state.users.map(user => <div>{user}</div>)}
        <button onClick={this.fetchNewUser}>Get new user</button>
      </div>
    );
  }
});

ReactDOM.render(
  <UserGist source="https://api.github.com/users/octocat/gists" />,
  mountNode
);