Untitled

 avatar
unknown
plain_text
2 years ago
1.1 kB
6
Indexable
import React, { useState } from "react";

function Pagination({ itemsPerPage, data }) {
  const [currentPage, setCurrentPage] = useState(1);

  const totalPages = Math.ceil(data.length / itemsPerPage);

  const handleClick = (type) => {
    if (type === "prev") {
      setCurrentPage((prev) => prev - 1);
    } else if (type === "next") {
      setCurrentPage((prev) => prev + 1);
    }
  };

  const start = (currentPage - 1) * itemsPerPage;
  const end = start + itemsPerPage;
  const currentData = data.slice(start, end);

  return (
    <div>
      <ul>
        {currentData.map((item, index) => (
          <li key={index}>{item}</li>
        ))}
      </ul>
      <div>
        <button
          onClick={() => handleClick("prev")}
          disabled={currentPage === 1}
        >
          Previous
        </button>
        <span>{currentPage}</span>
        <button
          onClick={() => handleClick("next")}
          disabled={currentPage === totalPages}
        >
          Next
        </button>
      </div>
    </div>
  );
}

export default Pagination;
Editor is loading...