Ответ
В React с использованием useState
и простой пагинации:
const [currentPage, setCurrentPage] = useState(1);
const itemsPerPage = 10;
// Данные для отображения
const indexOfLastItem = currentPage * itemsPerPage;
const indexOfFirstItem = indexOfLastItem - itemsPerPage;
const currentItems = data.slice(indexOfFirstItem, indexOfLastItem);
// Рендер пагинации
const paginate = (pageNumber) => setCurrentPage(pageNumber);
return (
<div>
{currentItems.map(item => (
<div key={item.id}>{item.name}</div>
))}
<div className="pagination">
{[...Array(Math.ceil(data.length / itemsPerPage)).keys()].map(number => (
<button key={number} onClick={() => paginate(number + 1)}>
{number + 1}
</button>
))}
</div>
</div>
);
Для сложных случаев можно использовать библиотеки типа react-paginate
или API с пагинацией (limit/offset).