Wrap the provider in a component — practice exercise

What you'll be asked to do

1. 1.Wrap the provider in a componentexercise · easy · 10 min

   Move the provider into its own component that renders children.

   Passes when: #value should show dark.

2. 2.Expose a custom hookexercise · easy · 10 min · practice plan

   Wrap useContext in a named hook and use it.

   Passes when: #value should show dark.

3. 3.Provide value and setter togetherexercise · medium · 10 min · practice plan

   Pass both the value and its setter through one context.

   Passes when: #value should show dark.

4. 4.Nest two providersexercise · medium · 10 min · practice plan

   Read from two different contexts in one child.

   Passes when: #value should show dark Ada.

5. 5.Override a nested providerexercise · easy · 10 min · practice plan

   An inner provider wins for the components below it.

   Passes when: #value should show inner.

6. 6.Fix the provider that drops its childrenbug fix · easy · 8 min

   The wrapper renders its own content instead of children.

   Passes when: #value should show dark.

7. 7.Fix the hook reading the wrong contextbug fix · easy · 8 min · practice plan

   The custom hook subscribes to the other context.

   Passes when: #value should show dark.

8. 8.Fix the setter left out of the valuebug fix · medium · 8 min · practice plan

   Only the value is provided, so the child cannot change it.

   Passes when: Swapping should show dark.

9. 9.Fix the providers in the wrong orderbug fix · medium · 8 min · practice plan

   The child sits outside the second provider.

   Passes when: #value should show dark Ada.

10. 10.Fix the inner provider that is ignoredbug fix · easy · 8 min · practice plan

    The child is placed under the outer provider only.

    Passes when: #value should show inner.

Between them these tasks cover Provider components, Custom hooks and Splitting context.

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