A How to Guide on Pagination!
What is Pagination?
Pagination is a feature that we, as web users, overlook but use everyday. It’s what guides us through multiple pages of requested information and is an intricate part of any good user interface.
Simply put, it’s a collection of data with a set number of elements to be displayed per page. Additionally, there are pagination controls, such as next and previous or even particular page numbers. Pretty vital piece of UI right? This article will give you the basic elements in order to implement pagination into your web app!
Boilerplate
What we’ve initially got to work with is a basic app that fetches user data from an API and stores it into our state allUsers. We then pass state down into our User component and render individual UserCard's containing a userId,title and body.
As it stands, our app currently renders an array of 100 objects onto our page. Our goal will be to display 10 elements per page and render our pagination controls to move throughout the data. Currently our App.js looks like:
For our first steps to achieving pagination in our app, we’ll need to add some new states and declare a few variables. This might be confusing but follow along closely.
State
The state’s that will be adding are a currentPage: 1 and per_page: 10 . This sets our initial page and the number of results we want displayed per page.
Variables
Next we’ll need to declare a few variables below our render() but before our return():
const currentPage = this.state.currentPage;
const PerPage = this.state.per_page;
const allUsers = this.state.allUsers;const indexOfLastUser = currentPage * PerPage;
const indexOfFirstUser = indexOfLastUser - PerPage;
const currentUsers = allUsers.slice(indexOfFirstUser, indexOfLastUser);
Now, instead of passing all the users into our Users component, we’ll now pass it our variable currentUsers. After our app refreshes, you should only see 10 cards displayed! Our App.js now should look like:
Pagination Controls
Now that we’ve got 10 items displaying per page, we’ll need to add our pagination controls in order to navigate to other pages. In our App.js and above our Users component, we’ll add a new component called PaginationControls and pass our per_page and the length of our allUsers states.
<PaginationControls perPage={PerPage} users={allUsers.length} />Next we’ll need to create the file PaginationControls.js in our src folder. It’ll be a functional component that baseline looks like this:
import React from 'react'function PaginatonControls(PerPage, users) { return (
<div className="pagination-controls"> </div>
)
}export default PaginatonControls;
Logic
Our goal here will be to render the page numbers as buttons and display the entries onClick. We’ll start by declaring an empty array called pageNumbers. Next we’ll create a for loop which will run until we use our Math.ceil() to divide the total number of users by the PerPage props we’ve passed to this component, finally incrementing upwards with i++. In order to complete this logic we’ll need to push i into our empty array.
const pageNumbers = [];for(let i=1; i<=Math.ceil(usersLength / PerPage); i++)
{
pageNumbers.push(i)
}
Buttons
Now that we’ve got a bit of logic out of the way, we’ll need to render our control buttons and create an event handler called handleClick. Our completed PaginationControl.js should look like:
Event handler
The final piece will be our handleClick function which will send us back to our App.js file. handleClick will be a function that takes the page number we passed to it from the click event and then changing our currentPage state. Let’s also not forget to pass the function down as props into the PaginationControls component! Our handleClick function should look like:
handleCLick = (pageNumber) => {
this.setState({ currentPage: pageNumber })
}ET VOILA! You should have a fully functioning app with pagination implemented.
