The answer
Pass a depth prop to each TreeNode. Set style={{ paddingLeft: depth * 20 }}. Each level of nesting increases depth by 1, adding 20px of indentation. This creates the visual hierarchy.
File Explorer Component in React
How do you handle indentation in a React file explorer?
More FAQs in File Explorer Component in React
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.
Still have questions?
Browse all our FAQs or reach out to our support team
Want to upskill yourself?
Your learning library
Small steps. Big possibilities.
Find your next course. Build something great.