react reload data with AJAX

Question

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.

Can you show the code?

Deepak
– Deepak

2015-03-14 09:32:42 +00:00
Commented Mar 14, 2015 at 9:32 — Deepak
– Deepak, Commented Mar 14, 2015 at 9:32
Can you let me know if my answer helped?

Deepak
– Deepak

2015-03-14 16:39:25 +00:00
Commented Mar 14, 2015 at 16:39 — Deepak
– Deepak, Commented Mar 14, 2015 at 16:39

Deepak · Accepted Answer · 2015-03-14 15:27:24Z

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

Collectives™ on Stack Overflow

react reload data with AJAX

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related