Pagination Buttons
ReactJS
Medium
6 views
Problem Description
Create a pagination component with Prev/Next and current page text.
Output Format
Render a React component.
Constraints
Disable Prev on page 1 and Next on last page.
Official Solution
import React, { useState } from 'react';
function Pagination({ page, totalPages, onChange }) {
return (
<div style={{ display: 'flex', alignItems: 'center', gap: 10 }}>
<button type='button' disabled={page === 1} onClick={() => onChange(page - 1)} style={{ padding: '8px 12px', borderRadius: 12, border: '1px solid #ddd', background: '#fff' }}>
Prev
</button>
<span style={{ color: '#555' }}>Page {page} of {totalPages}</span>
<button type='button' disabled={page === totalPages} onClick={() => onChange(page + 1)} style={{ padding: '8px 12px', borderRadius: 12, border: '1px solid #ddd', background: '#fff' }}>
Next
</button>
</div>
);
}
export default function App() {
const [page, setPage] = useState(1);
return (
<div style={{ padding: 16 }}>
<Pagination page={page} totalPages={5} onChange={setPage} />
<p style={{ marginTop: 12 }}>Showing meetcode questions for page {page}.</p>
</div>
);
}
Solutions (0)
No solutions submitted yet. Be the first!
No comments yet. Start the discussion!