Build Tabs
Build a tabbed interface from the provided TABS data. The starter renders every tab as active and only the first panel — fix both.
Requirements
- Exactly one panel is visible at a time.
- Clicking a tab shows its panel and moves the active styling.
- The first tab is selected on load.
- Set
aria-selectedon the active tab, since the markup already uses tab roles.
Hints
Hint 1
A single activeId (or index) in state is the entire model — active styling and the visible panel both derive from it.
Hint 2
Apply the class conditionally: className={tab.id === activeId ? 'active' : ''} — and put aria-selected on the same condition.