How to Implement Pagination in React

Introduction

Pagination helps break down large lists into smaller, easy-to-navigate parts. In React, you can create simple pagination using state to manage the current page and slice your data. This way, users can see a few items at a time, making your app cleaner and more user-friendly. Let’s explore how to do this step by step!

Understanding Pagination

Before we dive into coding, let's talk about why pagination is important. When you have a long list of items, showing them all at once can overwhelm users. Pagination makes it easier to navigate through the list without clutter. It also improves load times because the app only needs to fetch a small portion of the data at once.

Setting Up Your React Project

If you haven't set up a React project yet, you can do it easily using Create React App. Run the following command in your terminal:

npx create-react-app pagination-demo

Once your project is set up, navigate into the project folder:

cd pagination-demo

Creating a Sample Data Set

For our example, let's create some sample data. We'll use an array of objects to simulate items you might display, like products or users. In your src folder, create a new file called data.js and add the following code:

const data = Array.from({ length: 100 }, (v, k) => ({
  id: k + 1,
  name: `Item ${k + 1}`
}));

export default data;

Building the Pagination Component

Now that we have our data, let's build a component to display it with pagination. Create a new file named Pagination.js in the src folder. Here's a simple way to set up pagination:

import React, { useState } from 'react';
import data from './data';

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

  // Calculate the index of the last item on the current page
  const indexOfLastItem = currentPage * itemsPerPage;
  // Calculate the index of the first item on the current page
  const indexOfFirstItem = indexOfLastItem - itemsPerPage;
  // Get current items
  const currentItems = data.slice(indexOfFirstItem, indexOfLastItem);

  // Change page
  const handlePageChange = (pageNumber) => {
    setCurrentPage(pageNumber);
  };

  // Create page numbers
  const pageNumbers = [];
  for (let i = 1; i <= Math.ceil(data.length / itemsPerPage); i++) {
    pageNumbers.push(i);
  }

  return (
    <div>
      <ul>
        {currentItems.map(item => (
          <li key={item.id}>{item.name}</li>
        ))}
      </ul>
      <nav>
        <ul className="pagination">
          {pageNumbers.map(number => (
            <li key={number}>
              <button onClick={() => handlePageChange(number)}>{number}</button>
            </li>
          ))}
        </ul>
      </nav>
    </div>
  );
};

export default Pagination;

Adding the Pagination Component to Your App

Now it's time to use our Pagination component. Open the App.js file in the src folder and import the Pagination component:

import React from 'react';
import Pagination from './Pagination';

const App = () => {
  return (
    <div>
      <h2>My Pagination Example</h2>
      <Pagination />
    </div>
  );
};

export default App;

Styling the Pagination

To make our pagination look better, let's add some basic styles. You can create a styles.css file in the src folder and add the following styles:

.pagination {
  display: flex;
  list-style-type: none;
}

.pagination li {
  margin: 0 5px;
}

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

Then, make sure to import the stylesheet in your App.js:

import './styles.css';

Conclusion

And that's it! You now have a simple pagination system in your React app. This structure allows users to view items in a more organized way. You can expand on this by adding features like next and previous buttons, disabling certain buttons, or even fetching data from an API. The possibilities are endless!

If you want to learn more about React and how to improve your web applications, check out the official React Documentation.