Codstak
    • Home
    • DSA
    • JavaScript
    • TypeScript
    • Node.js
    • React
    • More↓
      BlogReact PrepPricingDiscordNewsletterLeaderboard
    14-session interview prep/Day 3

    Build a Controlled Command Picker

    Challenge workspace

    90-110 min
    Frontend system designDay 3 of 14
    Controlled ComponentsSelectionReact

    A server-side browser check verifies your submitted workspace before this day is completed.

    Day 3 — Build a controlled command picker

    Connect the command list to its parent so selecting a command updates the displayed selection.

    Requirements

    • Render the commands from the provided array with stable keys.
    • Let the parent own the selected command ID.
    • Clicking a command must update the selected-command summary.
    • Pass selection changes through the component's callback.

    Interview review

    • When is a native <select> the better product decision?
    • What changes if this picker also has text filtering?
    • Why should the parent own the selection state?