Create a pagination component in React

Question

Create a pagination component in React.

Answer

Use state to track the current page and render a slice of data accordingly.

import { useState } from 'react';

function PaginationExample() {
  const items = Array.from({ length: 50 }, (_, i) => `Item ${i + 1}`);
  const [page, setPage] = useState(1);
  const perPage = 5;

  const start = (page - 1) * perPage;
  const visible = items.slice(start, start + perPage);

  const totalPages = Math.ceil(items.length / perPage);

  return (
    <div>
      <ul>
        {visible.map((item) => (
          <li key={item}>{item}</li>
        ))}
      </ul>
      <div>
        <button disabled={page === 1} onClick={() => setPage(page - 1)}>
          Prev
        </button>
        <span>
          {page} / {totalPages}
        </span>
        <button
          disabled={page === totalPages}
          onClick={() => setPage(page + 1)}>
          Next
        </button>
      </div>
    </div>
  );
}

✅ Manages page state, dynamically slices data, and renders navigation buttons.

Real-World Example

• Job listings
• Product grids
• Blog pagination

Quick Practice

Add page number buttons instead of only “Next/Prev”.

Summary

Track the current page with state and slice data arrays dynamically to create pagination.