React-Waypoint Infinite Scroll Step 3

infinite-scroll-example-step-3.jsx

var InfiniteScrollExample = React.createClass({
  _loadMoreItems: function() {
    this.setState({ loading: true });
    // Do the fetching of data here with AJAX
    // In this fake example we just generate more image urls
    // and set the state of 'loading' to false.
    // ...
  },

  getInitialState: function() {
    // set up list of items ...
  },

  _renderItems: function() {
    return this.state.items.map(function(imageUrl, index) {
      // ... generate list items here ...
    });
  },
  
  _renderWaypoint: function() {
    if (!this.state.isLoading) {
      return (
        <Waypoint
          onEnter={this._loadMoreItems}
          threshold={2.0}
        />
      );
    }
  },

  render: function() {
    return (
      <div className="infinite-scroll-example">
        <div className="infinite-scroll-example__scrollable-parent">
          {this._renderItems()}
          {this._renderWaypoint()}
        </div>
      </div>
    );
  }
});