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

    Nested Checkboxes

    Challenge workspace

    35-45 min
    Lists and formsPath 14/40
    ListsFormsState & eventsDerived state

    Suggested first

    Simple Todo List

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

    Nested Checkboxes

    Build a grouped team selector in which parent controls and child controls always agree.

    Provided test hooks

    • Keep all-checkbox on the top checkbox.
    • Keep group-${group.id}-checkbox on each group checkbox.
    • Keep item-${item.id} on each child checkbox.
    • Keep selection-summary on the selected-count text.

    Requirements

    • Store selected child IDs as the single source of truth.
    • Selecting a group selects all children in that group.
    • Clearing a group clears only its children.
    • Derive whether parent checkboxes are fully or partially selected.
    • Selecting children individually must update the matching parent.
    • The top checkbox must select or clear every child.
    • Display the current selected-child count.

    What to explain

    Explain why storing separate booleans for every parent can drift out of sync, and how deriving parent state from the selected child IDs avoids that problem.

    Progressive hints

    1. Use every to determine whether all IDs in a group are selected.
    2. Use some together with every to determine the partial state.
    3. Add missing IDs with a Set, and remove IDs with filter.

    Reference solution notes

    The reference stores only leaf IDs. Every group state and the overall state are derived during render, so there is no second selection model to synchronize.