Independence. Each node manages its own expand/collapse state, so toggling one node does not affect others. This is simpler than managing all state in a parent component. It also means React only re-renders the toggled node, not the entire tree.
Create a TreeNode component with useState for expanded/collapsed. Render children recursively as TreeNode components. Click toggles expanded for folders. Icon changes based on state. Indentation via paddingLeft: depth * 20.
Use useState in each TreeNode: const [expanded, setExpanded] = useState(false). On click, setExpanded(!expanded). Only render children if expanded is true. Each node manages its own state independently.
The TreeNode component renders its children as TreeNode components: node.children.map(child => <TreeNode node={child} depth={depth + 1} />). This recursion renders the entire tree. Each node is a separate component with its own state.
Browse all our FAQs or reach out to our support team
Your learning library
Find your next course. Build something great.
