Nested Tabs From a Flat Array

You are handed a flat array of { id, name, parentId } and asked to render it as a nested tab or accordion structure, with each item appearing under its parent.

The whole problem is recognising it is two problems. Trying to render nesting directly from the flat array leads to filtering the array once per level, which is quadratic and impossible to write for unknown depth. Transform first, then render.

The transform is the standard one: build a lookup of id → node, each with an empty children array, then walk the list again and push every node into its parent. Doing it in two passes is what makes the input order irrelevant — a child listed before its parent still finds it — and that is worth saying out loud, because the single-pass version needs extra handling for forward references.

Rendering is then mutual recursion: a level renders items, and an item renders a level for its children. Depth stops being something the code knows about.

The data here is deliberately three levels deep, because a two-level implementation passes a two-level test and fails the moment anything nests further.

A good follow-up to expect: a real tab list moves selection with the arrow keys, and genuinely nested navigation is usually better served by role="tree" than by tabs. Knowing which pattern you are actually building is part of the answer.