React · Exercise 6 of 6 Previous
Intermediate
Mini build: compound Tabs
Build compound components Tabs, Tab and TabPanel that share the active tab through context (createContext + useContext), so the Course component below works without passing state by hand.
<Tabs defaultValue> keeps the active value in state. Each <Tab value> renders a <button role="tab"> with aria-selected true when active (false otherwise) and makes its value active on click. Each <TabPanel value> renders a <div role="tabpanel"> with its children only when its value is active (otherwise nothing).
What Check tests
- Three tabs; only
Lessonsis selected at the start - Only the lessons panel is shown at the start
- Clicking
Practiceshows the practice panel - The selection moves to
Practice - Clicking
Notesworks too - The parts share state through context
Stuck? One hint at a time
The solution unlocks after your first Check. Try first: that is where the learning happens.
Runs in your browser. Your code is saved here.
Your page
Press Run to see the page.
Console
Nothing logged yet.