One of the most widely used UI component in our application is pagination. It can make website more friendly and keep us updated to other data as we requested. This also helps a lot in reducing the cognitive load and also enhances UX of the product.
There are many ways how we can implement pagination inside our application. We can hit request on each page or just fetch all the list at once and reflect inside our UI only the desired one we need are most common two ways. Here we will go into fetching all at once and listing only few in the screen and progressively disclose upon request.
We will divide our article into 4 simple steps. The steps are listed and gradually described as well.
1.Setup and install desired packages.
2. Fetching all data from the Endpoint.
3. Adding desired list into UI
4. Paginating the list
Setup and installation
The data source for this project can also be served from anywhere you can find the sources where you can get the data from here. But we will be using a simple resource for our data called JsonPlaceholder. We will be getting the list of all the post we have and later move towards paginating it.
For this work to get accomplished we will be just using a package called axios in our React application, which we can install with command below:
yarn add axios
We will now create a new folder and name it api. Where we will make our datasource endpoint here, so we will name the file datasource.js. Our code looks something like this.
Fetching all data
We will move towards writing our code to fetch all the data we can receive from our endpoint. For that we will make the use of useEffect hook. Also we need to add an empty  to the last so that it don’t evoke when the DOM updates every time.
Here in the code we also have made the use of useState hook. So, that we can maintain the state as well. Our post is initially empty then after using the setPosts and passing the post we get from the API.
Finally, we changed isLoading boolean property to false which was initially the same.
Adding desired list in UI
We will show only the desired list into our interface and the rest we will later add pagination to reflect it into our UI. For this we need to add bit of logic into our app. We will add posts of the current page into our new state we define.
Here in the code we have added a useState hook for our postsPerPage which is initially set to 10. We also added our logic in knowing the lastPost, currentPost, firstPost we will have into our UI as well. We have then sent our props to our Paginated component. Let’s see our Pagination component now.
We received the props of postPerPage and totalPage here and added our loop to push the numbers into our pageNumbers array. After all we just added a map to loop the list of pagination we need to have in total.
Notice that we use
Math.ceil()here to ensure that we get an integer value for the total number of pages. This also ensures that the excess records are captured in the last page, especially in cases where the number of excess records is less than the number of records to be shown per page.
Now, here in the last step we can get into sending down the props to our Paginate component which is the current page number we are at, which we have already logic for that function.
Here we have our final code ready where we will know the current page and send the current page to our Pagination component. Let’s now see how our Pagination component looks like.
Finally, we have finished our pagination of our data list from our endpoint. Here in the pagination component we received the prop we passed from paginate and during the on click function we passed our number we currently have.
Here although we didn’t interact with our API in each request of the page. But it is definitely possible to create much advance one with caching and API request upon each page request as well. We can extend the features as you wish to suit the requirements of your application.
For the complete source code of this article, please checkout the react-pagination repository on my Github.
— — — — — — — — — — — Happy Coding! — — — — — — — — —