# 40 - Pagination for Long Lists of Data

### Description

Create a pagination component that displays a limited number of items per page, provides navigation controls for users to move between pages, visually indicates the current page and total number of pages, and allows for jump-to-page selections for direct navigation.

### **Algorithm**

1. Create a React component for the pagination
2. Define the pagination data structure (items per page, total items, current page)
3. Use the useState hook to manage the current page and total pages
4. Create a function to handle page navigation
5. Render the pagination controls and item list

### Classes

* `Pagination`: The main pagination component
* `PaginationControl`: A single pagination control component (e.g. "Previous", "Next", "Page X")

### Code

Pagination.js

```javascript
import React, { useState } from 'react';
import PaginationControl from './PaginationControl';

const Pagination = ({ items, itemsPerPage }) => {
  const [currentPage, setCurrentPage] = useState(1);
  const [totalPages, setTotalPages] = useState(Math.ceil(items.length / itemsPerPage));

  const handlePageNavigation = (pageNumber) => {
    setCurrentPage(pageNumber);
  };

  return (
    <div>
      <ul>
        {items.slice((currentPage - 1) * itemsPerPage, currentPage * itemsPerPage).map((item) => (
          <li key={item.id}>{item}</li>
        ))}
      </ul>
      <div>
        {Array.from(Array(totalPages), (_, index) => (
          <PaginationControl
            key={index}
            pageNumber={index + 1}
            currentPage={currentPage}
            onClick={() => handlePageNavigation(index + 1)}
          />
        ))}
      </div>
    </div>
  );
};

export default Pagination;

```

PaginationControl.js

```javascript
import React from 'react';

const PaginationControl = ({ pageNumber, currentPage, onClick }) => {
  return (
    <button
      onClick={onClick}
      style={{
        backgroundColor: pageNumber === currentPage ? 'gray' : 'white',
        color: pageNumber === currentPage ? 'white' : 'black',
      }}
    >
      {pageNumber}
    </button>
  );
};

export default PaginationControl;
```

### Explanation

The code creates a pagination component that displays a limited number of items per page, provides navigation controls for users to move between pages, visually indicates the current page and total number of pages, and allows for jump-to-page selections for direct navigation. The component uses the useState hook to manage the current page and total pages.

### Possible Future Enhancements

* Add support for dynamic item rendering
* Add support for pagination with API data
* Add support for custom pagination controls
* Use a library like React Pagination for more advanced pagination functionality