React · Exercise 5 of 5 Previous
Advanced
Tabs that remember with Activity
Build two tabs with buttons #tab-notes and #tab-timer. The Notes tab has an input #notes. The Timer tab's component logs timer started in an effect and timer stopped in its cleanup.
Right now the tabs use conditional rendering, so the note is lost when you switch away. Use <Activity> so that the typed note is still there after visiting the Timer tab.
The Timer must not start until its tab is shown, and must stop (cleanup runs) when you switch back to Notes. Notes is the tab shown first.
What Check tests
- Notes is visible first and the timer hasn't started
- Opening the Timer tab starts the timer and hides Notes
- Going back to Notes stops the timer
- The note typed earlier is still there
- Uses Activity
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.