React-bootstrap Pagination

In this article we will cover how we can implement pagination in react using react-bootstrap pagination component.

We are going to use free POKEAPI to get paginated number of records for pagination.

Terms you should before starting this

1. Offset means how many records we want to skip
2. limit means number of records to fetch

To get started run this command in you terminal to install react-bootstrap

After installing bootstrap we are going to import pagination component and will write a function to fetch initial 5 records.

Here we have created three states one will store the current page data (data), second will store the number of records we want to show on page (limit) and other store the whole data of our lifetime (backData). So above we have we have created a function “loadData” and called it in useEffect.

Next we are calling the api and are passing two variables in api url “offset” and “limit”. We are passing Offset parameter in the limit so that we can fetch any number of records we want and in offset we are passing our state length which is 0 initially, so it is going to fetch 5 records on initial render.

And if you open your console you will see the response from POKEAPI. Now its time to diplay data in the UI.

Here above we have created a state called count to store total number of record.We are merging the previous and new data and storing it in “BackupData” and we are slicing the number of records based on active page number and storing those sliced records in data state.Then we have mapped that array of data in ui.Also we have added the Paginated component in ui.

Now we will make pagination component dynamic and will generate number of pages for pagination component on the basis of count (total number of records).

Our main component now wold look like this

Above we have created two state next(contain next page with 1 number) and active (current page number) with 1 and have also created second component “PaginationCompoent” in which we are receiving the next page numeber. We have stared our loop with next number so that we would generate the new 8 numbers from the current one and we are checking on each iteration if the newly generated page number is smaller than or equal to (total number of pages) and the next 8 numbers.After this we are pushing each newly generated number with html in the numbers array.And are including in the main component.

Now we are going to handle the click on page number and display number of records based on page number.

For showing data based on current page number we have created a new function called “pageClick”. In page click we are getting pagenumber and we are checking if our total data is less than total number of records length only then we are going to call api to fetch new data and if data’s length is greater then we are going to slice the number of records from backup data and store it in state. After that we are updating the active and next state.

You can get full code here..

MuhamadBasirBaig/react-bootstrap-pagination

In this article, we learned about creating pagination with react bootstrap. Hope you have learned something new today and if you liked this article please make a clap and follow me for more content on Medium. Thanks for reading…