How do you handle indentation in a React file explorer?
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.
Verify This Answer
Cross-check this information using these trusted sources:
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