Tab Selector

componentseasy

10:00starts when you type

Guide

Challenge mode

# Requirements status

not runstarts on the Profile tab
not runshows only the content of the pressed tab
not runreports the active tab with aria-selected

# Edge cases

They are shown when you run the tests. Until then they appear as a hidden requirement.

hiddenHidden requirement
hiddenHidden requirement

# Statement

Goal

Build a tab selector: pressing a tab shows its content. You practice state for "which one is active", conditional rendering and the accessibility roles of tabs.

What you already have

The complete interface: the list of tabs and the content panel.
Your job is the logic: know which tab is active and show only its content.
Keep the roles (tablist, tab, tabpanel) and the names Profile, Security and Alerts: the tests use them.

Requirements

At the start the Profile tab is active and you see Profile details.
Pressing another tab shows only the content of that tab.
Each tab reports whether it is the active one with aria-selected.

Example

You open the challenge → you see Profile details.
You press Security → you see Security options and no longer Profile details.

Hints

Hint 1

The only thing that changes is which tab is active: store its id in useState.

Hint 2

The content comes from looking up the active tab in TABS; you do not need one state per tab.

Hint 3

Each tab reports whether it is active with aria-selected={...}.

Concepts

A minimal state (the active id) as the source of truth.
Conditional rendering or the hidden attribute.
Tab roles: tablist, tab, tabpanel, aria-selected.

App.jsx

Preview

The console is empty

Run your code with Ctrl+S

This console starts empty every time the preview loads. The browser's DevTools console keeps the messages with Preserve log.