Simple Pagination

Question

Paginate a list of items with next/prev buttons.

Accepted Answer

import './index.css'; import React, { useState } from 'react'; const items = Array.from({ length: 23 }, (_, i) => 'Item ' + (i + 1)); function App() { const [page, setPage] = useState(1); const perPage = 5; const total = Math.ceil(items.length / perPage); const paged = items.slice((page - 1) * perPage, page * perPage); return (

Simple Pagination

{item}

{page} / {total}

); } export default App; body { margin: 0; font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen', 'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue', sans-serif; background-color: #f5f5f5; } * { box-sizing: border-box; } .pagination-demo { max-width: 400px; margin: 60px auto; background: #fff; border-radius: 12px; box-shadow: 0 2px 16px rgba(0,0,0,0.08); padding: 32px 24px; text-align: center; } .pagination-title { font-size: 1.5rem; font-weight: bold; margin-bottom: 1.5rem; color: #1f2937; } .pagination-list { list-style: none; padding: 0; margin: 0 0 1rem 0; } .pagination-list li { padding: 0.5rem 0; border-bottom: 1px solid #e5e7eb; } .pagination-controls { display: flex; align-items: center; gap: 1rem; justify-content: center; } .pagination-controls button { padding: 0.5rem 1.2rem; font-size: 1.1rem; border: none; border-radius: 6px; background: #2563eb; color: #fff; cursor: pointer; transition: background 0.2s; } .pagination-controls button:disabled { background: #d1d5db; color: #fff; cursor: not-allowed; }