Implement a React component that performs client-side pagination for a list of items.

Question

Aryan Kumar · Answer

Sure, here is the code for a React component that performs client-side pagination for a list of items:

JavaScript

import React, { useState, useEffect } from "react";
import { Pagination } from "react-paginate";

const ItemsList = ({ items, currentPage, totalPages }) => {
  const [pageNumber, setPageNumber] = useState(currentPage);

  const handlePageChange = (pageNumber) => {
    setPageNumber(pageNumber);
  };

  return (
    <div>
      <h1>Items List</h1>
      <Pagination
        items={items}
        pageNumber={pageNumber}
        totalPages={totalPages}
        onChange={handlePageChange}
      />
    </div>
  );
};

export default ItemsList;

This code uses the react-paginate library to perform client-side pagination. The Pagination component takes a list of items, the current page number, and the total number of pages as props. The onChange prop is a function that is called when the page number changes.

The ItemsList component uses the useState hook to keep track of the current page number. The handlePageChange function is called when the user clicks on a page number in the pagination component. This function updates the pageNumber state variable and triggers a re-render of the component.

The Pagination component renders a list of links that allow the user to navigate to different pages of the list. The links are disabled when the page number is out of range.

To run this code, you can create a new React project and install the react-paginate package. Then, you can copy and paste the code above into a file called ItemsList.js. Finally, you can start the React development server and view the component in your browser.

forum

Implement a React component that performs client-side pagination for a list of items.

Can you answer this question?

1 Answers