A sample of how to wrap the component providing the context values in a React application.

cart-checkout-drawer-context-provider.js

    <CheckoutDrawerContext.Provider value={{ showDrawer, toggleCheckoutDrawer }}>
      <section className="cart-checkout">
        <CartDrawer selectedCartItems={selectedCartItems} />
      </section>
    </CheckoutDrawerContext.Provider>

Hi, thanks for the your kind words.

You're absolutely right, I don't need to put showDrawer into the CartDrawer component - thank you for pointing that out - I will update it.

As for the dummy functions created in the Context file, you don't have to add them there if you don't want to. You could just create a context file with nothing in it besides instantiating the context, then wherever the provider is you can set all your state variables and functions you need the context to be responsible for in that component.

I like to be a little more explicit about what the context is responsible for, but there's no rule that it has to.

I hope this helps!

Had a bit more reading around about the dummy function/values when the context is initialised, and I believe the rationale behind that is that state isn't guaranteed to be initialised, so the .Consumer part could/would end up with undefined values and functions.

Enjoyed learning context - thanks for the tutorial.