Paginate the team directory
React · React · intermediate · greenfield
Adds pagination to the team directory: a 10-per-page window over the members list with Prev/Next controls and a page indicator. Verified by paging back and forth through the 20-member staging directory.
The members list comes from the org API and grows as people join; teams range from a handful to a few hundred people.
Requirements
- Show the team directory 10 members per page.
- Prev/Next controls, disabled at the first and last page.
- Show a 'Page X of Y' indicator.
- Every member must be reachable through the pagination.
Files touched
- src/components/TeamDirectory.jsx
--- src/components/TeamDirectory.jsx
+import { useState } from 'react';
+
+const PAGE_SIZE = 10;
+
+export function TeamDirectory({ members }) {
+ const [page, setPage] = useState(0);
+ const pageCount = Math.floor(members.length / PAGE_SIZE);
+ const start = page * PAGE_SIZE;
+ const visible = members.slice(start, start + PAGE_SIZE);
+
+ return (
+ <div className="team-directory">
+ <ul>
+ {visible.map((member) => (
+ <li key={member.id}>
+ {member.name} — {member.role}
+ </li>
+ ))}
+ </ul>
+ <nav aria-label="Directory pages">
+ <button onClick={() => setPage(page - 1)} disabled={page === 0}>
+ Prev
+ </button>
+ <span>
+ Page {page + 1} of {pageCount}
+ </span>
+ <button onClick={() => setPage(page + 1)} disabled={page >= pageCount - 1}>
+ Next
+ </button>