React · Exercise 1 of 5Next
Intermediate
A theme toggle through context
App owns the theme state, but Panel always shows light and the button does nothing. Use context so that Panel reads the current theme and ToggleButton can switch it between "light" and "dark".
Don't pass the theme or the toggle function as props: keep <Panel /> and <ToggleButton /> without any props.
Keep the markup: #panel gets the class panel light or panel dark, #theme-name shows the theme's name, and #toggle switches it.
What Check tests
- It starts in the light theme
- Clicking the button switches to dark
- Clicking again switches back to light
- Panel and ToggleButton get no props
- A provider is rendered and context is read
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.