Search for a command to run...
Self-taught software developer with a passion for building web applications that enhance the user experience. Skilled in a range of technologies including Java, Golang, JavaScript, Typescript and more.
No comments yet. Be the first to comment.
Splitting into segments is an essential part of websites and programs that have a great deal of data to offer to the users. It is a procedure of isolating the data into numerous pages to make it more controllable and promptly accessible. In this blog entry, we will get familiar with segmentation in ReactJS with a code example utilizing Typescript.
Dividing data into numerous pages makes it simpler for users to explore and access the data. It is utilized in applications and websites where the data is excessively tremendous to show on a single page. Segmentation is particularly helpful in e-commerce websites, news websites, and content management systems where the amount of data is massive.
There are several ways to implement pagination in ReactJS. In this blog post, we will create a simple pagination component using the state and props in ReactJS. We will create a component that takes the total items and the number of items per page as props and returns the pagination component.
import React, { useState } from 'react';
interface Props {
items: any[];
itemsPerPage: number;
}
const Pagination: React.FC<Props> = ({ items, itemsPerPage }) => {
const [currentPage, setCurrentPage] = useState(1);
const lastIndex = currentPage * itemsPerPage;
const firstIndex = lastIndex - itemsPerPage;
const currentItems = items.slice(firstIndex, lastIndex);
const paginate = (pageNumber: number) => setCurrentPage(pageNumber);
return (
<div>
{currentItems.map((item) => (
<p key={item.id}>{item.name}</p>
))}
<br />
<p>
Page {currentPage} of {Math.ceil(items.length / itemsPerPage)}
</p>
<br />
<button onClick={() => paginate(1)} disabled={currentPage === 1}>
First
</button>
<button
onClick={() => paginate(currentPage - 1)}
disabled={currentPage === 1}
>
Prev
</button>
<button
onClick={() => paginate(currentPage + 1)}
disabled={currentPage === Math.ceil(items.length / itemsPerPage)}
>
Next
</button>
<button
onClick={() => paginate(Math.ceil(items.length / itemsPerPage))}
disabled={currentPage === Math.ceil(items.length / itemsPerPage)}
>
Last
</button>
</div>
);
};
export default Pagination;
A pagination component written in React that can be used to break down a large collection of items into multiple pages.
items: an array of items to be paginateditemsPerPage: the number of items to be displayed per pagecurrentPage: the current page number, initialized to 1The component uses useState hook to manage the current page number.
It calculates the first and last index of items to be displayed on the current page:
lastIndex: the index of the last item on the current pagefirstIndex: the index of the first item on the current pagecurrentItems: an array of items to be displayed on the current page, obtained by slicing the items array from firstIndex to lastIndexIt defines a paginate function to change the current page number.
It returns a UI with the following elements:
currentItems are displayed as a list of <p> elements.disabled property of each button is set based on the current page number.The component is exported as the default export.
In summary, this blog post discussed about the significance of pagination in ReactJS for dealing with considerable amounts of data. We likewise viewed a code illustration of how to apply pagination in ReactJS utilizing Typescript. Pagination is an essential part for any website or program that has a large measure of data to show to the users. By isolating the data into numerous pages, it makes it simpler for users to explore and access the data.
