Build a small counter app — practice exercise

What you'll be asked to do

1. 1.Build a small counter appexercise · easy · 10 min

   Combine state, an event and rendering.

   Passes when: #value should show 2.

2. 2.A list with an empty stateexercise · easy · 10 min · practice plan

   Render the items, or a message when there are none.

   Passes when: #value should show 2 items.

3. 3.A component with props and childrenexercise · easy · 10 min · practice plan

   Combine a prop and children in one component.

   Passes when: #root should show Notes body.

4. 4.State plus an effectexercise · medium · 10 min · practice plan

   Set a label from an effect once mounted.

   Passes when: #value should show ready 3.

5. 5.A controlled field with a resetexercise · medium · 10 min · practice plan

   Bind an input and clear it from a button.

   Passes when: #state should show cleared.

6. 6.Fix the counter that never movesbug fix · easy · 8 min

   The handler does not change the state.

   Passes when: Adding should show 2.

7. 7.Fix the empty state shown for a full listbug fix · easy · 8 min · practice plan

   The check is inverted.

   Passes when: #value should show 2 items.

8. 8.Fix the children dropped from the cardbug fix · easy · 8 min · practice plan

   The card renders its title but not its contents.

   Passes when: #root should show body.

9. 9.Fix the effect that never firesbug fix · easy · 8 min · practice plan

   The label stays empty because there is no effect.

   Passes when: #value should show ready 3.

10. 10.Fix the uncontrolled fieldbug fix · medium · 8 min · practice plan

    The input is not bound to state, so clearing does nothing.

    Passes when: Clearing should show cleared.

Between them these tasks cover Review, Composition and State and effects.

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