File Tree Explorer
Build a collapsible file tree (like VS Code's sidebar). Folders expand/collapse on click. Users can add files or folders inside any folder, and delete any node.
Requirements
- Render a nested tree of folders and files
- Click a folder to toggle expand/collapse
- Add a file or folder inside any folder (prompt for name)
- Delete any file or folder (deleting a folder removes its children too)
- Show appropriate icons: 📁 (closed folder), 📂 (open folder), 📄 (file)
- Indent child nodes by depth level
Key Patterns
Recursive component (TreeNode renders itself)useReducer for tree stateRecursive immutable tree updatemap() to update a node by IDfilter() to delete a node by ID
Important
Interview Tip
The key insight: tree state updates are recursive. Write helper functions — toggleNode(tree, id), addNode(tree, parentId, newNode), deleteNode(tree, id) — each using map/filter recursively. Using useReducer keeps the component clean: dispatch({ type: "TOGGLE", id }) instead of inline logic.
📁 my-project — hover a row to see actions
📂src
📂components
📄Button.tsx
📄Input.tsx
📁pages
📄App.tsx
📄index.ts
📄package.json
📄tsconfig.json