Create pagination in ReactJs

In this tutorial I will show you how to easily create pagination in your ReactJs app. Pagination is important if you are building a blog site. This helps in easy navigation through pages.

Note: If you are looking to create pagination using React hooks you should visit this tutorial Create pagination in React js using React Hooks

Requirements

• react-paginate
• axios

1. Create your react app npx create-react-app paginateappand install axios npm i axios --save and also react-paginate npm i react-paginate --save.
2. Now go to your src directory and open your app.js file.
3. Now will remove functional component and use class component.

4. Now import axios import axios from 'axios';and react-paginate import ReactPaginate from 'react-paginate';.

5. Now inside your class component create a constructor method and initialize some state.

constructor(props) {
    super(props);
    this.state = {
      offset: 0,
      data: [],
      perPage: 5,
      currentPage: 0
};
}

6. Now we will create a function to fetch our data using axios. For tutorial purpose i am using dummy data from https://jsonplaceholder.typicode.com/

here we are calling our api to fetch data using axios.get method and after getting response we are using slice method to slice our data( 5000array.slice(0, 0+10) ) and after slicing we are looping it through map function to get data in our postData const. We are also updating our pageCount state using Math.ceil() method (5000/10).

7. Now create a function to handle page click.

here we are updating our currentPage and offset state and calling our receivedData function to load data on clicking.

8. Now inside your render function paste the following code

9. Now your app.js file will look something similar to this

10. That’s it your pagination is ready now put the below css in your app.css file to style your pagination.

Here is the live example and git repository for that.

Mediumtutorial/react-pagination