Pagination
MediumReact Components20 min5 tests
Build a paginated list that shows 5 items per page out of 12 total, with Previous/Next buttons and a live "Page X of 3" status that disables the right buttons at the boundaries.
You are given an array of 12 string items and a fixed page size of 5. Render the items for the current page as a list, along with Previous and Next buttons and a status region that reads the current page number.
The component should:
- Start on page 1, showing the first 5 items.
- Show a
role="status"element readingPage X of 3(with 12 items at page size 5 there are 3 pages: 5 + 5 + 2). - Render exactly the slice of items belonging to the current page (5 items on pages 1 and 2, the remaining 2 items on page 3).
- Advance to the next page when Next is clicked and go back when Previous is clicked.
- Disable Previous on page 1 and disable Next on the last page (page 3), so the page index can never go out of range.
Use accessible markup: real <button> elements with visible labels, a role="status" for the page indicator, and a real list (<ul>/<li>) for the items.
Requirements
- Render the current page's items inside a real list (ul/li), showing 5 items per page
- Display a role="status" element with the exact text "Page X of 3" where X is the current page
- Start on page 1 showing items 1-5
- Clicking Next advances one page; clicking Previous goes back one page
- Previous button is disabled on page 1; Next button is disabled on the last page (page 3)
- Never allow navigating before page 1 or after page 3
Hints (3)
- Track the current page in state with useState(1). Compute total pages as Math.ceil(items.length / pageSize).
- Slice the items for the current page: items.slice((page - 1) * pageSize, page * pageSize).
- Disable Previous when page === 1 and disable Next when page === totalPages, and guard the click handlers so the page index stays in range.
Topics
- React
- React Components
Asked at
Microsoft · Groww · Rapido · Zomato · Unacademy · Google
