Create pagination in React js using React Hooks

This tutorial will use the React hooks to create pagination in React js. In my previous tutorial of creating pagination in react js, I have used class components to create pagination but after the huge response, I thought I should also write that tutorial using the functional components. If you want to visit my previous tutorial you can check that here.

Requirements

• react-paginate
• axios

1. Create your react project yarn create react-app projectname and install the required modules yarn add axios react-paginate and then open your app.js file.
2. We will first import our hooks from the react and also import the required modules.

import React, {useState, useEffect} from 'react'
import axios from 'axios'
import ReactPaginate from 'react-paginate';

3. Now create a functional component and inside that initialize some state using React useState hook.

const [offset, setOffset] = useState(0);
const [data, setData] = useState([]);
const [perPage] = useState(10);
const [pageCount, setPageCount] = useState(0)

4. Now we will create a getData function to load our data from the dummy API using Axios. This will be an asynchronous function that will fetch 5000 arrays of images from JSONplaceholder API. Paste the below code inside the functional component.

const getData = async() => {
      const res = await axios.get(`https://jsonplaceholder.typicode.com/photos`)
      const data = res.data;
                const slice = data.slice(offset, offset + perPage)
                const postData = slice.map(pd => <div key={pd.id}>
                    <p>{pd.title}</p>
                    <img src={pd.thumbnailUrl} alt=""/>
                </div>)
                setData(postData)
                setPageCount(Math.ceil(data.length / perPage))
  }

here, we are fetching data using axios get method and after getting the response we are passing the data to the data variable. After that, we are using the javascript slice method to slice our data( 5000array.slice(0, 0+10) ) and after slicing we are looping it through the javascript map function to get data in our postData variable. We are also updating the data state using the setData method to the postData and also updating the pageCount state using setPageCount method (Math.ceil(5000 / 10)).

6. Now call that getData method inside React useEffect method.

useEffect(() => {
   getData()
 }, [offset])

7. Now let's create a method to handle our page click. Paste the below code inside the functional component.

const handlePageClick = (e) => {
    const selectedPage = e.selected;
    setOffset(selectedPage + 1)
};

The method is just updating our offset state by adding 1 on each click using setOffset method.

8. Now all you need is to return your data state and ReactPaginate tag which we previously imported from react-paginate. We also need to pass our pageCount state to react paginate pageCount props and handlePageClick method to onPageChange props.

return (
    <div className="App">
      {data}
       <ReactPaginate
                    previousLabel={"prev"}
                    nextLabel={"next"}
                    breakLabel={"..."}
                    breakClassName={"break-me"}
                    pageCount={pageCount}
                    marginPagesDisplayed={2}
                    pageRangeDisplayed={5}
                    onPageChange={handlePageClick}
                    containerClassName={"pagination"}
                    subContainerClassName={"pages pagination"}
                    activeClassName={"active"}/>
    </div>
  );

9. That’s all you need to do to create pagination in react js using hooks. Below is the full code.

10. If you want to add some styling to your pagination paste the below code in your App.css file and import that.

Below are the live example and GitHub repository for reference.

Mediumtutorial/react-pagination-with-hooks-medium