5 hands-on exercises and 5 find-the-bug challenges for the Context Patterns lesson. Every one is checked automatically in the browser — write the code, run it, and the tests tell you what still fails.
Move the provider into its own component that renders children.
Wrap useContext in a named hook and use it.
Pass both the value and its setter through one context.
Read from two different contexts in one child.
An inner provider wins for the components below it.
The wrapper renders its own content instead of children.
The custom hook subscribes to the other context.
Ready to write the code?
The editor, the automatic checks and the worked solutions open up with an account.
Open the workspaceOnly the value is provided, so the child cannot change it.
The child sits outside the second provider.
The child is placed under the outer provider only.