You are building an admin dashboard view that displays a large set of mock inventory items. The current implementation fetches/loads all 32 items at once and renders them in a raw list, leading to poor visual organization.
Your task is to implement full client-side pagination inside src/PaginatedList.jsx.
Current Problems & Requirements:
- Page Sizing & Slicing:
- Calculate total pages using
Math.ceil(items.length / pageSize).
- Display only the items belonging to the current page.
- Items are 1-indexed for display. Page
1 with pageSize = 5 should show items from index 0 to 4.
- Page Controls:
- Render Previous and Next buttons.
- Disable the Previous button when on the first page (
page === 1).
- Disable the Next button when on the last page (
page === totalPages).
- Render numbered page buttons from
1 to totalPages. The active page button must have the class active.
- Page Size Selector:
- Render a
<select> dropdown with options [5, 10, 20].
- Changing the page size should reset the current page back to
1.
- State Boundaries & Edge Cases:
- Display a message reading
"No items found" when the items prop array is empty.
- Handle page navigation bounds cleanly so users cannot navigate to invalid page numbers.
Files to Edit:
Acceptance Criteria:
- Only the sliced items for the current page are rendered inside
ul.item-list.
- Changing pages via Previous/Next or numbered buttons updates the items correctly.
- Adjusting the page size dropdown resets current page state back to
1 and updates items shown.
- Buttons reflect correct
disabled attributes at lower and upper page boundaries.