CODEWITHSUNDEEP
reactjs
V_V
V_V

Reputation: 684

react reload data with AJAX

I have a series of React components loading data from HTTP service in componentDidMount as explained here http://facebook.github.io/react/tips/initial-ajax.html

<html>
<body>
  <script src="http://fb.me/react-0.13.0.min.js"></script>
  <script src="http://fb.me/JSXTransformer-0.13.0.js"></script>
  <script src="http://code.jquery.com/jquery-1.11.2.min.js"></script>

  <script type="text/jsx">
    var RandomGist = React.createClass({
      getInitialState: function() {
        return {
          id: '',
          url: ''
        };
      },

      componentDidMount: function() {
        $.get(this.props.source, function(result) {
          var gist = result[Math.round(Math.random() * result.length)];
          this.setState({
            id: gist.id,
            url: gist.html_url
          });
        }.bind(this));
      },

      render: function() {
        return (
          <div>
            <a href={this.state.url}>{this.state.id}</a>
          </div>
        );
      }
    });

    var GistList = React.createClass({
      render: function() {
        return (<div>{[1,2,3].map(function() {
          return <RandomGist source="https://api.github.com/users/octocat/gists" />;
        })}</div>);
      }
    });

    var RefreshableGistList = React.createClass({
      handleClick: function() {
        console.log("Click!");
      },

      render: function() {
        return (
          <div>
            <button onClick={this.handleClick}>Refresh</button>
            <GistList />
          </div>
        );
      }
    });

    React.render(
      <RefreshableGistList />,
      document.body
    );
  </script>
</body>
</html>

After click on Refresh button I would like to refresh gist from HTTP service. Problem is that setState and forceUpdate will not lead to that because getting data from HTTP service is done in componentDidMount as was explained in original react example.

Upvotes: 1

Views: 4799

Answers (1)

Deepak
Deepak

Reputation: 2531

You can do something like below. Fiddle here. 

var RandomGist = React.createClass({
  render: function() {
    return (
      <div>
        <a href={this.props.url}>{this.props.id}</a>
      </div>
    );
  }
});

var RefreshableGistList = React.createClass({
  getInitialState: function() {
    return {
      gists: []
    }
  },

  fetchGist: function() {
    $.get("https://api.github.com/users/octocat/gists", function(result) {
      var gist = result[Math.round(Math.random() * result.length)];

      this.state.gists.push({id: gist.id, url: gist.html_url})
      this.setState({
        gists: this.state.gists
      });
    }.bind(this));
  },

  generateRandomGists: function() {        
    [1,2,3].map(function() {
      this.fetchGist();
    }.bind(this));
  },

  componentDidMount: function() {
    this.generateRandomGists();
  },

  handleClick: function(e) {
    e.preventDefault();
    this.setState({gists: []})
    this.generateRandomGists();
  },

  render: function() {
    var gists = this.state.gists.map(function(gist) {
      return <RandomGist key={gist.id} url={gist.url} id={gist.id} />
    });

    return (
      <div>
        <button onClick={this.handleClick}>Refresh</button>
        <p />
        {gists}
      </div>
    );
  }
});

React.render(
  <RefreshableGistList />,
  document.body
);

Upvotes: 2

Related Questions