title: Pagination in React with REST API
body: <p>I'm learning React recently, and I want to know how to paginate in React.
  I have implemented a simple REST API that can fetch data from the database and return JSON file like this:</p>
  <pre><code>count: total number of data
  start: starting index of data
  limit: how many data per page
  next: api to fetch next page of data
  previous: api to fetch previous page of data
  
  {
      &quot;count&quot;: 17,
      &quot;start&quot;: 1
      &quot;limit&quot;: 5,
      &quot;next&quot;: &quot;/User/page?start=6&amp;limit=5&quot;,
      &quot;previous&quot;: &quot;&quot;,
      &quot;results&quot;: [
          {
              &quot;email&quot;: &quot;&quot;,
              &quot;first_name&quot;: &quot;&quot;,
              &quot;id&quot;: ,
              &quot;last_name&quot;: &quot;&quot;,
              &quot;password&quot;: &quot;&quot;,
          },
          ...
      ], 
  }
  </code></pre>
  <p>I want so I want to add two links at the bottom of each page, so that i can go forward and backwards.</p>
  <p>My current React code looks like this, I can fetch the data from first page, but I'm not sure how to get to the next page</p>
  <pre><code>class Users extends Component{
      state={
          count:undefined,
          limit:undefined,
          next:'',
          previous:'',
          start:undefined,
          results:[]
      }
      componentDidMount(){
          Axios.get('http://127.0.0.1:5000/User/page').then(response=&gt;{
              this.setState({
                  results:response.data.results,
                  count:response.data.count,
                  limit:response.data.limit,
                  next:response.data.next,
                  previous:response.data.previous,
                  start:response.data.start
              })
  
          })
      }
  
      render(){
          console.log(this.state.previous)
          console.log(this.state.next)
          return (
              &lt;div&gt;
                  {this.state.results.map((user)=&gt;{return &lt;User key={user.id} user={user}/&gt;})}
  
                  //I know this wont work
                  //&lt;a href={this.state.previous} style={{color:'#4c4c4c'}}&gt;prev&lt;/a&gt;
                  //&lt;br/&gt;
                  //&lt;a href={this.state.next} style={{color:'#4c4c4c'}}&gt;next&lt;/a&gt;
              &lt;/div&gt;
  
          )
      }
  }
  </code></pre>