Advanced React Patterns

Advanced React Patterns Basic Compound Component & Exercise


This course still contains valuable patterns in React, but doesn't cover React Hooks introduced in React 1.16.

Check out a free preview of the full Advanced React Patterns course:
The "Basic Compound Component & Exercise" Lesson is part of the full, Advanced React Patterns course featured in this preview video. Here's what you'd learn in this lesson:

Kent shows a compound component and how to pass properties to children components. Also, Kent sets up for the exercise to create a custom compound component.

Get Unlimited Access Now

Transcript from the "Basic Compound Component & Exercise" Lesson

>> Kent C. Dodds: Great, let's move on to the next exercise then. So, here we go on the app first and compound components. So here, it's not a whole lot different except you have this text up here that says the button is on, the button is off. On the exercise we don't have that, it's not working.

[00:00:19] So, let's go head and pop open 02 in the exercise. So if we look at the usage down here at the bottom, you'll find, and actually, sorry, real quick, somebody asked me what is this .title property I'm putting on the usage that's actually just for this. So it's nothing weird magic, it's just implementation detail.

[00:00:49] So the API to the usage function didn't change. And we're still accepting onToggling defaulting it to console line. So if you pop open in your console, you should see those logs, so our toggle the API, the prox API has not changed. It should still accept an onToggle prompt.

[00:01:06] But now we have these static components, these are called compound components. Actually, let me get into the why behind this. The why behind, actually I don’t have a why for that, so I’ll just explain it. So inside of our render component we’re saying hey listen I’m a toggle component and this is what I render.

[00:01:33] That’s all, that’s all you get for using me. But what if I come in and say, hey listen, it would be really cool if I could have a message that appears above the toggle component inside of that same thing that says whether or not it´s on or off.

[00:01:47] Maybe you´re doing this for accessibility reasons or something. And so inside of our render method we could say, if this .props.renderMessage, then we'll add a like render a message here as well. And we can even have like what that message is and so on. What that leads to is a more complicated API and a more complicated implementation.

[00:02:17] And so instead what we could do is we'd say yes if you want to render anything within this toggle component, then we'll provide these additional components that share implicit state with the parent. So if you think about this like a select shares implicit state with the option that is a compound component, where the select is the thing that holds this state.

[00:02:42] And then these options communicate with the parent to create by themselves they're useless but together they're very useful. That's the idea behind these compound components. And so here, we say, hey, if the toggle button is on, then I wanna render this. If it's off, then I wanna render this.

[00:03:02] And the cool thing about using compound components is, I actually have control over what order these things are rendering in. And so maybe I should do this in the final version so you can see. No peeking. So if I put this down below. And now I toggled this on and it jumps back and forth.

[00:03:19] And you'd never wanna actually do that. It's like users are like what? I feel like medium does that when I go to reply to somebody's thing like it pops up all their stuff and it's super annoying. And I click on their article by accident. I'm pretty sure they do that on purpose.

[00:03:35] So some of the benefits of compound components here is the ability to choose what order things are rendered in. Also to be able to share some inputs it state between the parent and the children. So I don't have to know that the toggle component is managing an on state.

[00:03:55] I just use these things, and they're responsible for rendering certain things. So the Toggle.On is responsible for rendering its children when the on state is true. The Toggle.Off is the same in reverse and then the toggle button will render the switch. So, yes, to accomplish this, you're going to be, first off these are working based on static properties, so they're static properties of the toggle component.

[00:04:27] And they themselves are components. You can just do this with the arrow functions. The really tricky part is providing the necessary props to these components that you'll have to do. And that you'll be using a to take this.props.children map it to different components, and you'll clone those elements.

[00:04:48] So when I create one of these, when I do this, this is transpiling into react.createElement. So this is actually giving me an element. And so this.props.children inside of my render method here is an array of elements. And so I'm using React Children map to map over those elements and then from that map function, I return a call to react that clone element.

[00:05:12] And that process, I can provide additional props which is exactly what you're gonna be doing. I've provided the documentation if you're not familiar with these methods, you can go look that up. And with that let's go ahead and go to our tests, open up 02, and swap out the final usage for the exercise usage.

[00:05:33] And you'll start getting your errors.