Instructions
Your task is to build a paginated list that allows the user to navigate through a dataset using "Previous" and "Next" buttons.
Requirements
- You are given an array of users
- Show only a subset of users per page (default: 5 users per page).
- Add "Previous" and "Next" buttons to navigate between pages.
- Disable the "Previous" button on the first page and "Next" on the last page.
- Display "Page X of Y" between the buttons.
Bonus
- Add a dropdown selector to choose the number of users per page (5, 10, or 20). Changing the selection should reset to page 1.
- The table should update dynamically when the page changes or the number of items per page changes.
Solution Preview
Instructions
Your task is to build a paginated list that allows the user to navigate through a dataset using "Previous" and "Next" buttons. #### Requirements - You are given an array of users - Show only a subset of users per page (default: 5 users per page). - Add "Previous" and "Next" buttons to navigate between pages. - Disable the "Previous" button on the first page and "Next" on the last page. - Display "Page X of Y" between the buttons. #### Bonus - Add a dropdown selector to choose the number of users per page (5, 10, or 20). Changing the selection should reset to page 1. - The table should update dynamically when the page changes or the number of items per page changes. [View Solution](https://www.reactstack.dev/solutions/react-pagination-guide)
import React, { useState } from "react" export default function PaginationChallenge() { return ( <div> <h1>Pagination Challenge</h1> {/* Table */} <table border="1" cellPadding="5" style={{ borderCollapse: "collapse" }}> <thead> <tr> <th>ID</th> <th>Name</th> <th>Email</th> <th>Role</th> </tr> </thead> <tbody> {users.map((user) => ( <tr key={user.id}> <td>{user.id}</td> <td>{user.name}</td> <td>{user.email}</td> <td>{user.role}</td> </tr> ))} </tbody> </table> </div> ) } // Do not change the code below const users = [ { id: 1, name: "Alice Johnson", email: "alice.johnson@example.com", role: "Admin", }, { id: 2, name: "Bob Smith", email: "bob.smith@example.com", role: "User" }, { id: 3, name: "Charlie Brown", email: "charlie.brown@example.com", role: "Editor", }, { id: 4, name: "Diana Prince", email: "diana.prince@example.com", role: "User", }, { id: 5, name: "Ethan Clark", email: "ethan.clark@example.com", role: "Admin", }, { id: 6, name: "Fiona Adams", email: "fiona.adams@example.com", role: "Editor", }, { id: 7, name: "George Hall", email: "george.hall@example.com", role: "User", }, { id: 8, name: "Hannah Lewis", email: "hannah.lewis@example.com", role: "User", }, { id: 9, name: "Ian Scott", email: "ian.scott@example.com", role: "Editor" }, { id: 10, name: "Jane Miller", email: "jane.miller@example.com", role: "Admin", }, { id: 11, name: "Kevin Turner", email: "kevin.turner@example.com", role: "User", }, { id: 12, name: "Laura White", email: "laura.white@example.com", role: "User", }, { id: 13, name: "Mike Young", email: "mike.young@example.com", role: "Editor", }, { id: 14, name: "Nina Brooks", email: "nina.brooks@example.com", role: "User", }, { id: 15, name: "Oscar Reed", email: "oscar.reed@example.com", role: "Admin", }, { id: 16, name: "Paula Evans", email: "paula.evans@example.com", role: "Editor", }, { id: 17, name: "Quinn Harris", email: "quinn.harris@example.com", role: "User", }, { id: 18, name: "Rachel Ward", email: "rachel.ward@example.com", role: "User", }, { id: 19, name: "Sam Carter", email: "sam.carter@example.com", role: "Editor", }, { id: 20, name: "Tina Collins", email: "tina.collins@example.com", role: "Admin", }, { id: 21, name: "Uma Kelly", email: "uma.kelly@example.com", role: "User" }, { id: 22, name: "Victor Morgan", email: "victor.morgan@example.com", role: "User", }, { id: 23, name: "Wendy Ross", email: "wendy.ross@example.com", role: "Editor", }, { id: 24, name: "Xander Price", email: "xander.price@example.com", role: "User", }, { id: 25, name: "Yara Gomez", email: "yara.gomez@example.com", role: "Admin", }, { id: 26, name: "Zane Parker", email: "zane.parker@example.com", role: "Editor", }, { id: 27, name: "Amber Hughes", email: "amber.hughes@example.com", role: "User", }, { id: 28, name: "Brian Foster", email: "brian.foster@example.com", role: "User", }, { id: 29, name: "Cindy Stone", email: "cindy.stone@example.com", role: "Editor", }, { id: 30, name: "Derek West", email: "derek.west@example.com", role: "Admin", }, { id: 31, name: "Ella Gray", email: "ella.gray@example.com", role: "User" }, { id: 32, name: "Frankie Wells", email: "frankie.wells@example.com", role: "Editor", }, { id: 33, name: "Grace Hill", email: "grace.hill@example.com", role: "User" }, { id: 34, name: "Harry Price", email: "harry.price@example.com", role: "User", }, { id: 35, name: "Isla James", email: "isla.james@example.com", role: "Editor", }, { id: 36, name: "Jack Morris", email: "jack.morris@example.com", role: "Admin", }, { id: 37, name: "Kylie Bennett", email: "kylie.bennett@example.com", role: "User", }, { id: 38, name: "Liam Reed", email: "liam.reed@example.com", role: "User" }, { id: 39, name: "Maya Foster", email: "maya.foster@example.com", role: "Editor", }, { id: 40, name: "Noah Perry", email: "noah.perry@example.com", role: "User" }, { id: 41, name: "Olivia Sanders", email: "olivia.sanders@example.com", role: "Admin", }, { id: 42, name: "Peter Ross", email: "peter.ross@example.com", role: "Editor", }, { id: 43, name: "Queenie Brooks", email: "queenie.brooks@example.com", role: "User", }, { id: 44, name: "Ralph Scott", email: "ralph.scott@example.com", role: "User", }, { id: 45, name: "Sophia Turner", email: "sophia.turner@example.com", role: "Editor", }, { id: 46, name: "Thomas Hughes", email: "thomas.hughes@example.com", role: "Admin", }, { id: 47, name: "Ursula King", email: "ursula.king@example.com", role: "User", }, { id: 48, name: "Violet Hall", email: "violet.hall@example.com", role: "User", }, { id: 49, name: "William Lane", email: "william.lane@example.com", role: "Editor", }, { id: 50, name: "Ximena Cruz", email: "ximena.cruz@example.com", role: "User", }, ]