title: Pagination with json-server and React.js
body: <p>I am trying to paginate JSON data that I am using with JSON server in React. I am currently using splice to break the data up into pages with 10 items per page. To get the data from each splice I have an unordered list where the list items are assigned the data. I actually want to just have pages and a next button rather than have each page listed at the top of the page, but I cant seem to wrap my head around it. I would like to use _page _limit. Any help would be appreciated. Here is the code.</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>import React, { Component } from 'react';
  // added axios to assist with API calls.
  import axios from 'axios';
  
  import './App.css';
  import Card from './Card.js';
  import SearchBar from "./SearchBar.js"
  import star from './images/star.svg';
  import wars from './images/wars.svg';
  
  class App extends Component {
  
    constructor(props) {
      super(props);
      this.state = {
        people: []
      }
    }
  
    componentDidMount() {
      this.getPeopleData();
    }
  
    getPeopleData(search) {
      axios.get('http://localhost:3008/people?_start=0&amp;_end=9&amp;q=' + search).then((response) =&gt; {
        this.setState ({
          people: response.data
        });
      });
    }
  
  
    //1. Using axios and decided to use the slice method rather than the _page _limit from https://github.com/typicode/json-server#slice
    limitPerPage (begin, end) {
      axios(`http://localhost:3008/people?_start=${begin}&amp;_end=${end}`).then((response) =&gt; {
        this.setState ({
          people: response.data
        });
      });
    }
    
    render() {
      return (
        &lt;div className='content'&gt;
          &lt;div className='logo'&gt;
            &lt;img src={star} alt="star-logo" /&gt;
            &lt;span className='interview-text'&gt;The Interview&lt;/span&gt;
            &lt;img src={wars} alt="wars-logo" /&gt;
          &lt;/div&gt;
  
  
          &lt;h2&gt;Cards&lt;/h2&gt;
  
          {/* Decided to display the card pages as a list. Each page holds 10 cards */}
          &lt;ul className="card-pagination"&gt;
            &lt;li&gt;
              &lt;a onClick={() =&gt; this.limitPerPage(0, 9)}&gt;Page 1&lt;/a&gt;
            &lt;/li&gt;
  
            &lt;li&gt;
              &lt;a onClick={() =&gt; this.limitPerPage(10, 19)}&gt;Page 2&lt;/a&gt;
            &lt;/li&gt;
  
            &lt;li&gt;
              &lt;a onClick={() =&gt; this.limitPerPage(20, 29)}&gt;Page 3&lt;/a&gt;
            &lt;/li&gt;
  
            &lt;li&gt;
              &lt;a onClick={() =&gt; this.limitPerPage(30, 39)}&gt;Page 4&lt;/a&gt;
            &lt;/li&gt;
  
            &lt;li&gt;
              &lt;a onClick={() =&gt; this.limitPerPage(40, 49)}&gt;Page 5&lt;/a&gt;
            &lt;/li&gt;
  
            &lt;li&gt;
              &lt;a onClick={() =&gt; this.limitPerPage(50, 59)}&gt;Page 6&lt;/a&gt;
            &lt;/li&gt;
  
            &lt;li&gt;
              &lt;a onClick={() =&gt; this.limitPerPage(60, 69)}&gt;Page 7&lt;/a&gt;
            &lt;/li&gt;
  
            &lt;li&gt;
              &lt;a onClick={() =&gt; this.limitPerPage(70, 79)}&gt;Page 8&lt;/a&gt;
            &lt;/li&gt;
  
            &lt;li&gt;
              &lt;a onClick={() =&gt; this.limitPerPage(80, 89)}&gt;Page 9&lt;/a&gt;
            &lt;/li&gt;
          
          &lt;/ul&gt;
  
          {this.state.people.map((person) =&gt; {
            return &lt;Card
                      key={person.id}
                      id={person.id}
                      name={person.name}
                      imageURL={('http://localhost:3008/' + person.image)}
                      birthday={person.birth_year}
                      planetList={this.state.planets}
                      homeWorld={person.homeworld}
                    /&gt;
          })}
        &lt;/div&gt;
      );
    }
  }
  
  export default App;</code></pre>
  </div>
  </div>
  </p>