Implement react pagination with react hooks and react paginate

Implement React
Pagination with
React Hooks and
React Paginate
www.bacancytechnology.com

We often end up having a web application
with a large number of data to be displayed.
And at that time, Pagination comes to the
rescue for managing such a vast dataset. In
this blogpost, we will build a small
application to implement ReactJS
pagination using React Hooks and a
package named React Paginate. Without
further ado, let’s start coding!
Here is the source code for React pagination
example -> Github Repository. You can
clone the repository and play around with
the code. Let’s have a look at how to make
pagination in ReactJS.

How to
Implement
Pagination
Using React
Hooks and
React
Paginate?

npx create-react-app react-pagination
cd react-pagination
Create and Navigate to
your React pagination
project;
Here’s How to Install
Axios and React
Paginate
Based on your package manager, install
Axios and React Paginate.

yarn add axios react-paginate
For yarn, run this command-
For npm, run this command-
npm install axios react-paginate

iimport React, { useState, useEffect } from 'react'
iimport axios from 'axios'
iimport ReactPaginate from 'react-paginate';
Now, open App.js and make the necessary
changes.
Import React Hooks,
React Paginate, and Axios

const [postsPerPage] = useState(5);
const [offset, setOffset] = useState(1);
const [posts, setAllPosts] = useState([]);
const [pageCount, setPageCount] = useState(0)
Initializing React Hooks

We will use a dummy API ->
https://jsonplaceholder.typicode.com/posts
to fetch the data and display it. getAllposts()
will be an async function that will return a
response containing 100 posts. In
getPostData(), we will manipulate data
according to the HTML structure that needs
to be displayed.
Fetching Data Using
Axios

const getPostData = (data) => {
return (
data.map(post => <div
className="container" key={post.id}>
<p>User ID: {post.id}</p>
<p>Title: {post.title}</p>
</div>)
)
}
const getAllPosts = async () => {
const res = await
axios.get(`https://jsonplaceholder.typicode.c
om/posts`)
const data = res.data;
const slice = data.slice(offset - 1 , offset - 1
+ postsPerPage)
// For displaying Data
const postData = getPostData(slice)
// Using Hooks to set value
setAllPosts(postData)

setPageCount(Math.ceil(data.length /
postsPerPage))
}
const handlePageClick = (e) => {
const selectedPage = e.selected;
setOffset(selectedPage + 1)
};

Here we will fetch data using Axios and
then store the response in the variable
named data. The motive behind the
JavaScript function – slice, is to slice our
data, i.e., 100array.slice(0, 0+5)). Further, we
will loop the data using a map function,
return the HTML structure and store it in
the variable named postData. Then, update
the state with postData using React hook
setAllPosts. This was related to updating
our data. Now, for updating the pageCount
we will use (Math.ceil(data.length /
postsPerPage))
and further store it using setPageCount
hook.

Call getAllPosts() from
React hooks – useEffect()
useEffect(() => {getAllPosts()}, [offset])
Create a method for
handling the page click
const handlePageClick = (event) => {
const selectedPage = event.selected;
setOffset(selectedPage + 1)
};

Now you just need to return your posts and
implement the ReactPaginate tag using
some of its props. We will call
handlePageClick() using onPageChange
props, so whenever we click on next or
previous, the method handlePageClick() will
be called.

return (
<div className="main-app">
{/* Display all the posts */}
{posts}
{/* Using React Paginate */}
<ReactPaginate
previousLabel={"previous"}
nextLabel={"next"}
breakLabel={"..."}
breakClassName={"break-me"}
pageCount={pageCount}
onPageChange={handlePageClick}
containerClassName={"pagination"}
subContainerClassName={"pages
pagination"}
activeClassName={"active"} />
</div>
);

After implementing the above code
snippets, your App.js would look something
like this-

Implement react pagination with react hooks and react paginate

App.js hosted with ❤ by GitHub
view raw

In case you want CSS code for App.css; it’s
here-

App.css hosted with ❤ by GitHub
view raw

After the coding part is done, as shown
above, ReactJS pagination example would
look something like this –
Video URL:
https://www.bacancytechnology.com/blog/wp-
content/uploads/2021/03/React-
pagination.mp4?_=1

I hope this comprehensive tutorial of
ReactJS pagination using React hooks
and React paginate has helped you the
way you’ve expected. If you are looking
for a helping hand to implement
pagination using React hooks and React
paginate then Hire ReactJS developer to
leverage the expertise.

Thank You
www.bacancytechnology.com

Implement react pagination with react hooks and react paginate

Recommended

More Related Content

What's hot (20)

Similar to Implement react pagination with react hooks and react paginate (20)

More from Katy Slemon (20)

Recently uploaded (20)

Implement react pagination with react hooks and react paginate