How to do custom pagination on react

0 votes
Can you tell me how to do custom pagination on React?
Dec 19, 2024 in Node-js by Ashutosh
• 27,850 points
98 views

No answer to this question. Be the first to respond.

Your answer

Your name to display (optional):
Privacy: Your email address will only be used for sending these notifications.
0 votes

It enhances user experience by efficiently managing large datasets.

Let's see how to create a custom pagination component:

State Management: Utilize React's useState to manage the current page and items per page.

const [currentPage, setCurrentPage] = useState(1);

const itemsPerPage = 10;

Calculate Total Pages: Determine the total number of pages based on the dataset length.

const totalPages = Math.ceil(data.length / itemsPerPage);

Paginate Data: Extract the subset of data corresponding to the current page.

const indexOfLastItem = currentPage * itemsPerPage;

const indexOfFirstItem = indexOfLastItem - itemsPerPage;

const currentItems = data.slice(indexOfFirstItem, indexOfLastItem);

Handle Page Changes: Create functions to navigate between pages.

const handleNextPage = () => {

  setCurrentPage((prev) => Math.min(prev + 1, totalPages));

};

const handlePrevPage = () => {

  setCurrentPage((prev) => Math.max(prev - 1, 1));

};

Render Pagination Controls: Display buttons or links for page navigation.

<button onClick={handlePrevPage} disabled={currentPage === 1}>

  Previous

</button>

<span>{currentPage} of {totalPages}</span>

<button onClick={handleNextPage} disabled={currentPage === totalPages}>

  Next

</button>

Display Current Items: Render the data for the current page.

<ul>

  {currentItems.map((item) => (

    <li key={item.id}>{item.name}</li>

  ))}

</ul>
answered Dec 24, 2024 by Navya

edited Mar 6

Related Questions In Node-js

0 votes
1 answer

How do I add custom JS to react?

Creating custom objects in React involves defining ...READ MORE

answered Jan 10 in Node-js by Navya
133 views
0 votes
1 answer

How do I add a custom script to my package.json file that runs a javascript file?

run npm run script1 it works for me READ MORE

answered Jan 10, 2023 in Node-js by Harisudarsan

edited Mar 5 42,106 views
0 votes
1 answer

How do I create a custom popover in React?

Create a custom popover in React by ...READ MORE

answered Feb 23 in Node-js by Kavya
137 views
0 votes
1 answer

How do I create a custom object in react?

Creating a custom popover in React enhances ...READ MORE

answered Dec 31, 2024 in Node-js by Navya
141 views
0 votes
1 answer

How do I create a custom slider in React?

Create a custom slider in React by ...READ MORE

answered Feb 23 in Node-js by Kavya
147 views
0 votes
1 answer

How do I redirect to a previous page in react?

You can use the useNavigate hook from ...READ MORE

answered Dec 31, 2024 in Node-js by Navya
132 views
0 votes
1 answer
0 votes
1 answer
webinar REGISTER FOR FREE WEBINAR X
REGISTER NOW
webinar_success Thank you for registering Join Edureka Meetup community for 100+ Free Webinars each month JOIN MEETUP GROUP