Pagination is a crucial element of web development that enhances user experience by breaking down large sets of content into manageable chunks. As a result websites load faster, and the navigation is improved.
Let me show you how to paginate without installing external dependencies in React.
Let's start by creating a functional component called Pagination and importing useState().
We will be working with these sample items, in the allItems array. On markup, each item is displayed on a card.
Now initialize states including currentActivePage that'll keep track of the current page, and itemsPerPage that'll define the number of items we need per paginated page.
With our items array and itemsPerPage defined, we can count the number of pages we'll have by dividing itemsPerPage to the allItems array length. This will be useful when displaying page numbers on the UI.
On markup, using the numberOfPages digit we got, we create an array from its length. The length will be equal to that digit, and the reason we must use an object with length property is because Array.from() accepts an iterable on that first argument, while the numberOfPages digit is just a number (not iterable).
From that generated array, we extract the indexes and make sure they start at 1 then map through the indexes and return a pageNumber that will be passed as argument to the function handling page change, and also will be displayed on the UI as page links.
Going forward we'll see how to create a part of the entire allItems array with each part being shown on its own page.
For us to show a portion of the entire array, we'll need to slice() the original array. To slice() it we'll require the start and end indexes.
We calculate the start index of each page by first subtracting 1 from the current page's number (subtracting since array indexes start at 0, and our currentActivePage state starts at 1) then multiplying the answer by itemsPerPage. For instance, the start index of page 1 with 6 items per page will be 0 >>> (1 - 1) * 6 = 0
The end index is given by adding itemsPerPage to the start index, i.e. the end index of page 1 in the above example will be 6 >>> 0 + 6 = 6
Each page will have it's own start and end index, different from the other.
Now let's slice the original array using our start and end index. This returns an array that is part of the original array within the range specified by the indexes.
On markup, we show the paginated items from the sliced array.
Finally, we will define a function that'll change the current page upon page number click on the UI. Remember when the currentActivePage state changes, new start and end indexes are calculated thus changing the earlier sliced array to a new one that is within the new specified range.
In conclusion, pagination is a great navigation element that helps increase user satisfaction by not overwhelming them with the number of contents displayed, instead it breaks contents into manageable portions, and by loading websites faster since the website will load a section of the entire contents at a time and not as a whole at once.
Top comments (0)