Tree Navigation II
Problem statement
Tree Navigation II adds search/filter functionality to the file tree from Part I. As the user types in a search box, the tree filters to show only matching nodes — and crucially, it also shows the ancestor folders of matching nodes so the results have context, not just isolated filenames.
The algorithmic challenge is the filter function: a node should be visible if it matches the search, OR if any of its descendants match. This requires a post-order traversal — you must recurse into children first before deciding if the parent is visible.
Additionally, matching nodes should have their folders auto-expanded in the results. This tests your ability to derive display state from search state rather than managing two separate open/collapsed states.
Requirements & constraints
- Search input filters nodes by name (case-insensitive)
- Matching nodes shown with ancestor folders for context
- Folders with matching descendants auto-expand during search
- Empty state shown when no matches found
- Clearing search restores original tree state
- Match text highlighted in the node label
How to approach Tree Navigation II
The strategy an interviewer expects you to reach for.
Why This Question Exists Tree Search tests a post-order recursive filter algorithm combined with UI state management. The filter is non-trivial: a node should be visible if it matches, OR if any descendant matches. This means you cannot make visibility decisions in pre-order (top-down) — you must recurse first, then decide.
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.