Recursive File Explorer

Problem Statement

When building text editors, cloud storage systems, or devtool sidebars (like in VS Code), we must render deeply nested hierarchy nodes representing folders and files. Because the depth of these folders is unknown at compile time, we cannot use flat loops or predefined layouts.

Your task is to build a recursive File Explorer component in React. The component should render folders and files from a JSON tree structure, support expanding/collapsing directories, and allow users to dynamically create new files or subfolders inside any directory node, updating the tree state immutably.

Requirements

Functional

• Recursive Rendering: Render folder and file hierarchies down to any arbitrary depth.
• Expand/Collapse: Clicking a folder must toggle its display list of child nodes (open vs closed).
• Dynamic Creation:
  • Render "Add File" and "Add Folder" controls beside folder nodes.
  • When clicked, render an inline input field allowing the user to type a name.
  • Pressing Enter or clicking outside must commit the new element into the directory.
• Immutable State Updates: When adding a node, you must modify the tree state immutably (i.e. returning a brand new state tree object without mutating the original state).

Non-Functional

• Render folder icons (open/closed) and file icons dynamically.
• Handle validation (e.g. empty file/folder names should not be created).
• Ensure children of folders are styled with appropriate indentation/margins to make the hierarchy visual.

Concepts Tested

• Self-referencing recursive React components.
• Hierarchical JSON tree structures.
• Deep recursive state updates in React.
• Event handling and inline inputs.