Click to change state — practice exercise

What you'll be asked to do

1. 1.Click to change stateexercise · easy · 10 min

   Set a status from a click handler.

   Passes when: #value should show ready.

2. 2.Pass a callback to a childexercise · medium · 10 min · practice plan

   Let a child button update the parent's state.

   Passes when: #value should show 3.

3. 3.Lift state to a shared parentexercise · medium · 10 min · practice plan

   Two children read the same value held by the parent.

   Passes when: #a should show 5.

4. 4.Reset state from a handlerexercise · easy · 10 min · practice plan

   Set the count back to its starting value.

   Passes when: #value should show 0.

5. 5.Add an item on clickexercise · easy · 10 min · practice plan

   Append to a list from a handler and show the count.

   Passes when: #count should show 1.

6. 6.Fix the child that cannot reach the parentbug fix · easy · 8 min

   The child needs the callback passed down as a prop.

   Passes when: Clicking should show 3.

7. 7.Fix the state kept in the wrong placebug fix · hard · 8 min · practice plan

   The value must live in the parent for both children to share it.

   Passes when: Both displays should show 5 after one click.

8. 8.Fix the reset that adds insteadbug fix · easy · 8 min · practice plan

   The reset handler increments rather than clearing.

   Passes when: Clicking reset should show 0.

9. 9.Fix the callback invoked too earlybug fix · medium · 8 min · practice plan

   The callback runs at render because it was called, not passed.

   Passes when: Clicking should show ready.

10. 10.Fix the list that never growsbug fix · easy · 8 min · practice plan

    The handler replaces the list instead of appending to it.

    Passes when: Clicking should show 3.

Between them these tasks cover Handlers with state, Lifting state and Callbacks.

Looking for a different chapter? See every practice set, or switch to the interview theory questions.