Untitled
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...