React Pagination — Numbered Page Buttons with Prev/Next

Lists & Composition — Intermediate React challenge.

Build classic numbered pagination with Prev/Next buttons — not a 'Load More' button. Each page shows a fixed slice of images; clicking a page number jumps directly to it, and Prev/Next correctly disable at the first and last page.

Requirements

• totalPages is derived as Math.ceil(images.length / itemsPerPage); the current page's images are a slice, not a growing accumulated list.
• One numbered button renders per total page; clicking a number jumps directly to that page.
• The button matching the current page is visually distinct (data-active + different CSS colors) from the others.
• Prev is disabled on page 1; Next is disabled on the last page; both are enabled in between.
• Handles a total image count that doesn't divide evenly into itemsPerPage (the last page has fewer images).

Signature

type GalleryImage = { id: string; url: string };
function PaginatedGallery({ images: GalleryImage[]; itemsPerPage?: number }): JSX.Element

Example

<PaginatedGallery images={twelveImages} itemsPerPage={2} />
// 6 numbered page buttons, page 1 active by default, 2 images shown
// click page 4 -> shows images 7-8, page-btn-4 becomes active

Constraints

• Use images.slice() to derive the visible page — do not accumulate/append images across pages like a 'Load More' pattern.
• Do not allow clicking Prev on page 1 or Next on the last page.