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>

Hello, thank you for your post on this - it was very nicely written.

Quick question on this code - but I can't work out why you are putting showDrawer into the context, but then still passing it as a prop to the CartDrawer component.

Also, have you seen anyway of getting the state into the context? I just can't get passed the doSomething: () => {} that is in most context components. Seems bizarre to have to define a dummy function that is discarded.

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.