Recursive comments and branch state

Opening your lesson

Nested discussions repeat the same shape at different depths. A comment has its own content, a disclosure control, and zero or more child comments. Recursion keeps that shape consistent, but state still belongs to each instance. Opening one branch must not open a sibling or erase its current state.

You'll render two fictional top-level discussions and one child reply. Expose each control's expanded state, keep the reply nested inside its parent article, and show an explicit empty message for a branch without replies. Expand both branches, then collapse only the first. That sequence reveals shared-state mistakes which a single click would miss. Use the stable record ids as keys, and read labels from the fixture so repeated rendering keeps each discussion attached to its identity.

function Comment({row,childrenRows}){const [open,setOpen]=useState(false);return <article aria-label={row.label}><h2>{row.label}</h2><button aria-expanded={open} onClick={()=>setOpen(v=>!v)}>{open?'Hide replies':'Show replies'}</button>{open&&(childrenRows.length?<section aria-label="Replies">{childrenRows.map(child=><Comment key={child.id} row={child} childrenRows={[]}/>)}</section>:<p role="status">No replies</p>)}</article>}
function App(){return <><h1>Dispatch discussion</h1><Comment row={f.rows[0]} childrenRows={[f.rows[2]]}/><Comment row={f.rows[1]} childrenRows={[]}/></>}

Trace the control, state change and accessible output in the completed example.

Choose your character

Your Work Gym account