This Lesson is for Members

Subscribe today and get access to all lessons! Plus direct HD download for offline use, enhances transcripts, member comment forums, and iTunes "podcast" RSS feed. Level up your skills now!

Unlock This Lesson

Already subscribed? Sign In

Autoplay
    This lesson is outdated. Click here to find out about changes you should be aware of.

    Make Compound React Components Flexible

    Kent C. DoddsKent C. Dodds

    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 safely defining childContextTypes, providing the value with getChildContext, and, on each of the components that need that context, we define contextTypes so that React will pass the context that is being asked for.

    reactReact
    Code

    Code

    Become a Member to view code

    You must be a Member to view code

    Access all courses and lessons, track your progress, gain confidence and expertise.

    Become a Member
    and unlock code for this lesson
    Transcript

    Transcript

    00:00 We've given the user some flexibility. They can move the button over here if they want, or even between these two. They can order things however they like. But we don't give them structural flexibility. If I were to do a div right here and then put the button inside here and then try and click on it, nothing's going to happen.

    00:17 Even if I were to put the toggle off inside of there and move the button out, then I click on this, that toggle off is not going to disappear like it should. That's because at the time that this render function is called, we get these children. Those children only include the direct descendants of our toggle button. That is this div. But it doesn't include what's inside the div.

    00:41 It's almost like this toggle component needs to set up some sort of context for this part of the tree. That's exactly what we need to do. We need to use React Context so that all of these components inside have access to the state of the toggle button, so they know what to do.

    00:56 To do this, let's make this toggle context variable. We'll just give it toggle as the value here. Then we're going to apply this context to everything under the toggle component. If we go down to the toggle component here, we'll say static child context types is this object. The key is going to be that toggle context, and the value needs to be prop types.object.is required.

    01:25 Now we also need to include this prop types library. I'm going to go up here and add another script tag for that. We need to go back to our toggle component. As a class method, we'll have get child context. This is going to return an object. We'll do toggle context. That object is going to be the same thing that we had for our props before.

    01:51 We need to establish that each of these components depends on this context. We do with context types. Those context types will look just like our child context type, so I'll just copy that and paste that here.

    02:04 We're going to do the same thing for all of these. We'll say toggle off and toggle button. Now, instead of on coming from the props it's going to come from context. We can get rid of on from the props.

    02:20 Then we're going to say const on equals context at toggle context. We'll do the same thing for our toggle off and our toggle button. Instead of on and toggle coming from props, we'll just leave all the props as they are and then take context. Then we'll get const on and toggle from context at toggle context.

    02:46 The last thing we need to do is update our render function. We no longer need to clone any elements. We can actually just render a div with this.props.children and get rid of all this React clone element stuff.

    02:58 Now I can click here, and everything's working. We can structure things as nested or as all over the place as we want to. All of these components will have access to the state of the toggle component through context.

    03:11 In review, what we had to do here to make this work is you define child context types. Then you have a special key that goes on the context. That's going to share a name space with all of the other components that are using context in the tree.

    03:25 Normally it's good to give it some sort of long, odd name that you wouldn't expect to conflict with anything else. That value is going to be the prop types that are appropriate for the context.

    03:37 You define get child context with what value you want to have in context. Then on each of the components that need that context, they declare that they need it with context types referencing that same key. You get the state from that context at that key for each of these components.

    03:53 Then we updated our render method to just render the children in a div. That allows us to structure things however we like inside our app.

    Discuss

    Discuss