Build a Pagination Component

import { useState } from "react";

const DATA = Array.from({ length: 50 }, (_, i) => "Item " + (i + 1));

function PaginationExample() {
  const [page, setPage] = useState(1);
  const pageSize = 10;
  const totalPages = Math.ceil(DATA.length / pageSize);

  const start = (page - 1) * pageSize;
  const visible = DATA.slice(start, start + pageSize);

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