Codstak
    • Home
    • DSA
    • JavaScript
    • TypeScript
    • Node.js
    • React
    • More↓
      BlogReact PrepPricingDiscordNewsletterLeaderboard
    React challenge/easy

    Repair the Team Directory Filter

    Challenge workspace

    20-30 min
    Lists and formsPath 8/33
    ListsFormsDerived state

    Suggested first

    Repair the Announcement ComposerTodo: Add a Task

    Your workspace must pass its server-side browser checks to complete this challenge.

    Searchable User List

    Turn a static team directory into a responsive search experience.

    Keep the provided list and result-count markup; add the search input and empty message.

    Requirements

    • Create a controlled search input using useState.
    • Filter by both name and role, ignoring letter case.
    • Keep the source users array unchanged and derive the visible list during render.
    • Display the number of matching people.
    • Render a helpful empty state when there are no matches.
    • Use each user's stable id as the React key.

    Stretch goal

    Highlight the matching part of each name or role without changing the underlying data.