title: ReactJS - Pagination/Load More from a REST API
body: <p><strong>In Short:</strong> I am fetching X JSON Objects from an API, but I only want to display the first 20 Objects, and then have the possibility to fetch another 20 Objects if the user decides to. Whats the best way to do that?</p>
  
  <p><strong>Here is my component, where I am fetching all the teams on componentDidMount and then getting all the JSON objects from my reducer:</strong></p>
  
  <pre><code>import React, { Component } from 'react'
  import { APIManager, DateUtils, YouTubeID } from '../../utils'
  import actions from '../../actions'
  import { connect } from 'react-redux'
  import  { Link, browserHistory } from 'react-router'
  
  
  class teams extends Component {
    constructor () {
      super()
      this.state = {
  
      }
    }
  
    selectTeam(team, event){
    event.preventDefault()
    this.props.selectTeam(team)
   }
  
    componentDidMount(){
      if(this.props.teams != null){
        return
      }
      this.props.fetchTeams()
    }
  
    componentDidUpdate(){
      if(this.props.teams != null){
        return
      }
      this.props.fetchTeams()
    }
  
    render(){
      return(
        &lt;div id="wrap"&gt;
          &lt;div style={{height: '65px'}} className="hero hero-teams-2"&gt;
          &lt;div className="hero-inner group"&gt;
            &lt;h1 className="center title-long"&gt;
              &lt;strong&gt;Pro CS:GO &lt;/strong&gt;
              Teams
            &lt;/h1&gt;
          &lt;/div&gt;
        &lt;/div&gt;
  
    &lt;div style={{paddingTop: '0px'}} id="wrap-inner"&gt;
      &lt;div id="content" role="main"&gt;
  
  &lt;div id="main" className="main-full"&gt;
    &lt;div className="group"&gt;
  
  
      &lt;div style={{marginLeft: '150px'}} className="portal-group designers"&gt;
  
        &lt;h3 style={{marginLeft: '40%'}} className="jump"&gt;
          &lt;a href="#"&gt;Select A Team&lt;/a&gt;
        &lt;/h3&gt;
  
        &lt;div className="scrollable-content-container"&gt;
          &lt;ol className="portal-list-members debutants scrollable"&gt;
  
  {(this.props.teams == null) ? null :
    this.props.teams.map((team, i) =&gt; {
  
      return (
        &lt;li onClick={this.selectTeam.bind(this, team.teamname)} key={i} className="group"&gt;
          &lt;h3&gt;
          &lt;Link to={'/team'} style={{color: '#444', textTransform: 'capitalize'}} className="url hoverable" href="#"&gt;
            &lt;img style={{height: '160px', width: '160px'}} className="photo" src={"images/"+team.image}/&gt;
          {team.teamname}
        &lt;/Link&gt;
        &lt;/h3&gt;
      &lt;/li&gt;
      )
    })
  }
  &lt;/ol&gt;
        &lt;/div&gt;
      &lt;/div&gt;
    &lt;/div&gt;
  &lt;/div&gt;
  
      &lt;/div&gt;
    &lt;/div&gt;
  &lt;/div&gt;
      )
    }
  }
  
  const stateToProps = (state) =&gt; {
    return {
        teams: state.players.teams
    }
  }
  
  const dispatchToProps = (dispatch) =&gt; {
    return {
      selectTeam: (team) =&gt; dispatch(actions.selectTeam(team)),
      fetchTeams: (params) =&gt; dispatch(actions.fetchTeams(params))
    }
  }
  
  export default connect(stateToProps, dispatchToProps)(teams)
  </code></pre>
  
  <p><strong>Mongo Query</strong></p>
  
  <pre><code>router.get('/liveTeams', function(req, res, next){
    Team.find({})
    .where('status', 'live')
      .sort({timestamp : -1})
    .exec(function(err, results){
      if(err) return next(err);
      res.json({
        confirmation: 'success',
        results: results
      })
    });
  });
  </code></pre>