title: React Pagination : How to Load second page data on Click
body: <p>I am creating pagination for my application, I am beginner to reactJS . I am using API for fetching page data but data is long long as list , I want to show it ( 10-10 ) . I Implemented Logic for it , fortunately it showing 10 entries on first page when I click on <code>2</code> Nothing happen . I want to show first <code>10</code> entries in first page but when user click on <code>2</code> It must show <code>10-20</code> entries in second page ( Mean that on second click it should skip first 10 entries and include 10-20 in second page ) . It will maintain same manner when user click on next or <code>3</code>. It possible because API is built in loopback and loopback give filtering functionality . I used filter in API link for just first 10 entries which are showing in first page . Could someone please help me how to implement this logic . Thanks</p>
  
  <p><strong>Code</strong></p>
  
  <pre><code>        class Example extends React.Component {
    constructor(props) {
      super(props);
  
      this.state = {
        Item: 5,
        skip: 0
      }
  
      this.handleClick = this.handleClick.bind(this);
    }
  
    urlParams() {
      return `http://localhost:3001/meetups?filter[limit]=${(this.state.Item)}&amp;&amp;filter[skip]=${this.state.skip}`
    }
  
    handleClick() {
      this.setState({skip: this.state.skip + 1})
    }
  
    render() {
      return (
        &lt;div&gt;
          &lt;a href={this.urlParams()}&gt;Example link&lt;/a&gt;
          &lt;pre&gt;{this.urlParams()}&lt;/pre&gt;
          &lt;button onClick={this.handleClick}&gt;Change link&lt;/button&gt;
        &lt;/div&gt;
      )
    }
  }
  
  
  ReactDOM.render(&lt;Example/&gt;, document.querySelector('div#my-example' ))
  </code></pre>