How to create pagination in react js?

December 02, 2024

Hi Friends 👋,

Welcome To aHoisting!

To create and manege pagination in react js, you have to use Pagination totalItems, itemsPerPage, currentPage and onPageChange and whenever on page change triggers we have to change the current page number, that’s how we can create pagination in react js.

Today, I am going to show you, how to create pagination in react js.

Table of contents

Install and create a new React app.
Import react component.
Create a Component.

Let’s start with the first step.

Step 1: Install and create a new React app.

First you have to install the React project. You should use create-react-app command to create a new React project.

npx create-react-app my-app
cd my-app
npm start

Step 2: Import react component.

After installing, you have to import your React component.

import React, { useState } from 'react';

Step 3: Create a Component.

You can use <Pagination> to create pagination in react js.

<div>
  <ul>
    {currentItems.map((item, index) => (
      <li key={index}>{item}</li>
    ))}
  </ul>
    <Pagination
    totalItems={items.length}
    itemsPerPage={itemsPerPage}
    currentPage={currentPage}
    onPageChange={setCurrentPage}
  />
</div>

Create pagination example.

The below code is an example of a React. You have to import react and use Pagination totalItems, itemsPerPage, currentPage and onPageChange to create pagination in react js.

App.js

import React, { useState } from 'react';

const PaginationExample = ({ items }) => {
  const [currentPage, setCurrentPage] = useState(1);
  const itemsPerPage = 10;

  // Calculate indices for slicing the data
  const indexOfLastItem = currentPage * itemsPerPage;
  const indexOfFirstItem = indexOfLastItem - itemsPerPage;
  const currentItems = items.slice(indexOfFirstItem, indexOfLastItem);

  return (
    <div>
      <ul>
        {currentItems.map((item, index) => (
          <li key={index}>{item}</li>
        ))}
      </ul>
      <Pagination
        totalItems={items.length}
        itemsPerPage={itemsPerPage}
        currentPage={currentPage}
        onPageChange={setCurrentPage}
      />
    </div>
  );
};

const Pagination = ({ totalItems, itemsPerPage, currentPage, onPageChange }) => {
  const totalPages = Math.ceil(totalItems / itemsPerPage);

  const handlePageChange = (page) => {
    if (page > 0 && page <= totalPages) {
      onPageChange(page);
    }
  };

  return (
    <div className="pagination">
      <button
        onClick={() => handlePageChange(currentPage - 1)}
        disabled={currentPage === 1}
      >
        Previous
      </button>
      {Array.from({ length: totalPages }, (_, index) => (
        <button
          key={index + 1}
          onClick={() => handlePageChange(index + 1)}
          className={currentPage === index + 1 ? 'active' : ''}
        >
          {index + 1}
        </button>
      ))}
      <button
        onClick={() => handlePageChange(currentPage + 1)}
        disabled={currentPage === totalPages}
      >
        Next
      </button>
    </div>
  );
};

const App = () => {
  const data = Array.from({ length: 50 }, (_, i) => `Item ${i + 1}`);

  return <PaginationExample items={data} />;
};

export default App;

App.css

.pagination {
  display: flex;
  gap: 5px;
}

.pagination button {
  padding: 5px 10px;
  cursor: pointer;
}

.pagination button.active {
  background-color: #007bff;
  color: white;
  border: none;
}

.pagination button:disabled {
  cursor: not-allowed;
  opacity: 0.5;
}

In the above code example, I have used the <Pagination> component to create pagination in react js.

Check the output of the above code.

All the best 👍