Nested Checkboxes

Problem Statement

Build a tree of checkboxes where a parent and its children stay in sync. The tree can be nested to any depth.

Functional Requirements

1. Render the tree: Show the items from checkBoxesData (Fruits and Vegetables with their children), with each level indented.
2. Cascade down: Checking or unchecking a parent sets all of its descendants to the same value.
3. Cascade up: A parent becomes checked when all of its children are checked, and unchecked when any child is unchecked.
4. Show state: A debug panel prints the checked object as JSON.

Technical Constraints

• Use one recursive CheckBoxes component for every level.
• Keep all checked values in a single { [id]: boolean } state object owned by App.

Function Explanations

CheckBoxes Component

This is a recursive React component that renders a nested checkbox tree structure.

Props:

• data: Array containing the hierarchical checkbox data
• checked: Object holding the current state of all checkboxes (ID → boolean)
• setChecked: State setter function to update the checkbox states

handleChange Function

Purpose: Handles checkbox toggle events and updates the state with proper parent-child relationships.

Parameters:

• isChecked: Boolean representing the new checked state
• item: The checkbox item object being toggled

JavaScript Methods Used:

• Spread operator (...prev): Creates a shallow copy of the previous state
• Computed property name ([item.id]): Dynamically assigns a property using the item's ID
• Optional chaining (?.): Safely accesses nested properties that might be undefined

updateChildren Function (Inner Function)

Purpose: Recursively updates all child checkboxes to match the parent's state.

Parameters:

• parentItem: The parent checkbox item whose children need updating

Process:

1. Checks if children exist using optional chaining
2. Iterates through each child using .forEach()
3. Sets each child's checked state to match the parent
4. Recursively calls itself for any grandchildren

verifyChecked Function (Inner Function)

Purpose: Validates and updates parent checkbox states based on their children.

Parameters:

• item: The checkbox item to verify

Returns: Boolean indicating if the item (and all its children) are checked

Process:

1. Base case: For items without children, returns the item's own checked state
2. For items with children, uses .every() to check if all children are checked
3. Recursively processes the entire subtree
4. Updates the parent's state based on its children's states

State Differences

prevState vs newState:

• prevState (referenced as prev in the code): The current checkbox state before the change
• newState: The updated checkbox state after processing the change and its cascading effects

Key Differences:

1. newState contains the direct change to the clicked checkbox
2. newState includes cascading updates to all children (through updateChildren)
3. newState includes cascading updates to all parents (through verifyChecked)

Complete Code Flow

1. App Component Initialization:

   • Creates an empty checked state object using useState({})
   • Renders the CheckBoxes component with the initial state

2. User Interaction:

   • User clicks a checkbox, triggering the onChange event
   • handleChange receives the new checked state and the item object

3. State Update Process:

   • setChecked is called with a function that receives the previous state
   • A new state object is created with the clicked checkbox's state updated
   • updateChildren is called to propagate the state to all descendants
   • verifyChecked is called on all top-level items to update parent states based on children
   • The final newState is returned, becoming the new checked state

4. Rendering:

   • React re-renders the component with the updated state
   • Each checkbox is rendered with its correct checked status
   • Children checkboxes are rendered recursively
   • Debug panel displays the current state in JSON format

5. Key Behaviors:

   • Checking a parent checks all its children (cascade down)
   • If all children are checked, the parent automatically checks (cascade up)
   • If any child is unchecked, the parent becomes unchecked (cascade up)