Nested Tabs From a Flat List
The rows arrive flat, as an API returns them: { id, name, parentId, content? }. Render each item under its parent as nested tabs. The top level is a row of tabs, the selected tab's children are another row beneath it, and a leaf shows its content.
Requirements
buildTree(items)links the rows into a tree in O(n). It must work when a child is listed before its parent, and it keeps input order among siblings.- A row whose
parentIdmatches nothing becomes a top-level tab. The fixture has one, so you can see where it lands. - Each level starts on its first tab. Selecting a tab at one level resets the levels below it.
- Each tab row is a
tablistwithtabs and atabpanel. The selected tab is the only one in the Tab order, and the arrow keys move along the row.
Hints
Hint 1
Build a Map from id to a copy of each row with an empty children array first, then link each node to its parent in a second pass. That is O(n), and order-independent.
Hint 2
Keep one piece of state: the selected id at each level, as an array. Selecting at level L keeps the first L entries and replaces the rest with the new id.
Hint 3
A recursive TabGroup renders one row of tabs plus a panel. The panel holds another TabGroup for the selected node's children, or the leaf's content.