Tree Navigation III
Problem statement
Tree Navigation III adds full CRUD operations to the file tree: create file, create folder, rename, and delete. Any node can be right-clicked to show a context menu with these options. This is the complete VS Code-style file explorer experience.
Build on Part II's searchable tree with a context menu that appears on right-click. The context menu must be positioned correctly near the cursor and dismissed when clicking outside. Create/rename operations show an inline text input directly in the tree.
The state management challenge is significant: the tree is now mutable. You need immutable update helpers (addNode, deleteNode, renameNode) that traverse the tree and return new objects at every level without mutation.
Requirements & constraints
- Right-click context menu with: New File, New Folder, Rename, Delete
- Context menu positioned near cursor, dismissed on outside click
- Inline editing input for create and rename operations
- Immutable tree updates for all CRUD operations
- Cannot delete root node
- Created nodes appear at correct position in tree
How to approach Tree Navigation III
The strategy an interviewer expects you to reach for.
Why This Question Exists Tree Navigation III is the hardest version: full CRUD on a recursive tree structure. It tests three senior engineering skills simultaneously: immutable recursive state updates (the hardest part), context menu positioning and dismissal, and inline editing UX. This question is asked at companies building developer tools, design platforms, and content management systems.
The full solution is part of HelloFrontend Pro
The question above is free to read in full. Upgrade to unlock the interactive workspace and the senior-level walkthrough that go with it.
- Live React sandbox pre-wired for this component
- Time-boxed checkpoints that mirror a real 45-minute round
- Interviewer scoring criteria and a full reference implementation
Already a member? Log in to open the workspace.