# Pagination in ReactJS

# Pagination in ReactJS with Typescript

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.


## Comprehending Pagination

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.

## Implementing Pagination in ReactJS

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.

## Code Example

```typescript
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;
```

## Code Explanation

A pagination component written in React that can be used to break down a large collection of items into multiple pages.

### Props
- `items`: an array of items to be paginated
- `itemsPerPage`: the number of items to be displayed per page

### State
- `currentPage`: the current page number, initialized to `1`

### Functionality

The component uses `useState` hook to manage the current page number. 

1. 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 page
   - `firstIndex`: the index of the first item on the current page
   - `currentItems`: an array of items to be displayed on the current page, obtained by slicing the `items` array from `firstIndex` to `lastIndex`

2. It defines a `paginate` function to change the current page number.

3. It returns a UI with the following elements:
   - The `currentItems` are displayed as a list of `<p>` elements.
   - The current page number and total number of pages are displayed.
   - Four buttons for navigating to the first, previous, next, and last page. The `disabled` property of each button is set based on the current page number.

### Export
The component is exported as the default export.


## Conclusion

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.