Make Compound React Components Flexible

Share this video with your friends

Send Tweet

Our current compound component implementation is great, but it's limited in that users cannot render the structure they need. Let's allow the user to have more flexibility by using React context to share the implicit state to our child <Toggle/> components. We will walk through using React's official context API with React.createContext and use the given Provider and Consumer components to share state implicitly between our compound components giving our users the flexibility they need out of our component.

Cristofer
Cristofer
~ 6 years ago

Hey Kent! enjoying a lot this course so far! I am wondering about the use of context, in our company we are still using React 15, and we would like to migrate soon to 16. We are using context in some places, however we know that the API was experimental and actually it was not recommended to use it. I am wondering if for 16 is safe to use, I also notice that the way of using it is a bit different, so maybe now is "stable" and ready to go. Thanks!

Kent C. Dodds
Kent C. Dodds(instructor)
~ 6 years ago

Hi Cristofer,

The new context API is stable and recommended for use. Learn more here, here, and here.

Joseph Curtis
Joseph Curtis
~ 6 years ago

These videos helped me out enormously, I got my moneys worth for the subscription and thank you Kent for the great videos!

Kent C. Dodds
Kent C. Dodds(instructor)
~ 6 years ago

Awesome Joseph! I'm so glad :)

Philipp Blume
Philipp Blume
~ 6 years ago

These videos helped me out enormously, I got my moneys worth for the subscription and thank you Kent for the great videos! Double ditto !

Kent C. Dodds
Kent C. Dodds(instructor)
~ 6 years ago

Thanks Philipp! 😊

Andy
Andy
~ 3 years ago

code sandbox issue: Error /src/exercises-final/01.js: hasn't been transpiled yet.