Sign in
Skip to solution
hardMachine Coding

Build Nested Checkboxes (tri-state)

1.1k views
01

Understand the problem

Build a checkbox tree where parents reflect child selection.

ReactTreeTri-state
02

Attempt it yourself

Sketch your approach before reading the solution — that's what interviews test.

Nudge consolestandby

Stuck? Beam a request up — the console returns a conceptual nudge that guides your logic without spoiling the implementation.

03

Study the solution

Solve in

Building Nested (Tri-state) Checkboxes in React

Mental model: Track only the leaf selection (a Set of leaf ids). Every parent's state is derived: checked if all its descendant leaves are selected, unchecked if none, indeterminate otherwise. Toggling a parent selects/clears all its leaves. Deriving paren

Solution ready — 2 min read

Classified // press E to declassify

04

React solution

Complete solutionRun Playground
import React from 'react';
import NestedCheckboxes from './src/NestedCheckboxes';

const tree = [
  {
    id: 'fruit',
    label: 'Fruit',
    children: [
      { id: 'apple', label: 'Apple' },
      { id: 'banana', label: 'Banana' },
      { id: 'cherry', label: 'Cherry' },
    ],
  },
  {
    id: 'veg',
    label: 'Vegetables',
    children: [
      { id: 'carrot', label: 'Carrot' },
      { id: 'pea', label: 'Pea' },
    ],
  },
];

export default function App() {
  return (
    <div style={{ fontFamily: 'sans-serif', padding: 20 }}>
      <h1>Nested Checkboxes Demo</h1>
      <NestedCheckboxes tree={tree} />
    </div>
  );
}
05

Join the discussion

Discussion (0)

Sign in to join the discussion.

No responses yet. Be the first to share what you think.

Transmission complete // awaiting log

KEEP THE
STREAK ALIVE.

Dossier 68 of 87 decoded in the Frontend Machine Coding track. One more won't hurt.

Back to track