00:00 Let's dive into the toggle component. So right here, we're just returning to do. We don't want to do that at all. Instead, we want to render our toggle context and provide our state and our toggle function as part of that context, because all of our compound components need access to that. So I'm going to say toggle context,

00:19 and we'll render our children in there. Toggle context. And of course, we need to create that toggle context. So let's go create that now. Toggle context. I don't even know why our AI assistant thought that would be a good idea. Create context. Here we go, from React. We're going to initialize that to null.

00:37 And here, we've got our typing for our context, which should be this. Here, we're going to say that or null. And yeah, there we go for that. That looks pretty good. So now we've got our toggle context,

00:56 and it is giving us that warning, because we need our value. There we go. So on and toggle will be passed to all of the consumers of our context. And with that now, our toggle on can access this value. So we're going to say, really, all we need is the on property, right?

01:16 So I'm going to destructure on from that. And use, of course, comes from React. This is going to give us this error. Well, here, first of all, we've got to get rid of that declaration. But it's still going to give us an error, because we can't destructure on from null, and null is our default value. Well, I got news for you.

01:35 Right here is where we're using that toggle, and we are providing that. So it can't be null, right? So let's just say, no, it can't be null, okay? Don't ever do this. I'm just doing this for demonstration purposes. We'll talk about it in the next step. But don't do this.

01:53 So we're going to just pretend that that's okay. And then we'll do the same thing right here. We'll get on from useToggleContext, and no, TypeScript, you're wrong. And then we're going to get both on and toggle. We're not going to default that. We're going to say, no, TypeScript, you're wrong.

02:12 And now we are set. If I save this, and I click, click, click, click, click, I'm getting the behavior that I want. It's working beautifully. So we're in a good place. So that's the basics of the compound components pattern. You have one component that manages the state,

02:31 and then it renders a context provider. And then you have other components that consume that and render other things. And then you export each of these components, and users can combine these in interesting ways. And so if I, as a user, was like, hey, you know what? I want to add an HR right here.

02:49 Then they totally can do that, or they can put it here. They have total control over where different things go, which I think is pretty cool. And we're going to explore this concept even further in future exercises as well, to give a lot of customizability to the way that these components are composed together.

03:08 But the basic idea is that, yeah, we're just going to compose these different compound components in interesting ways. And it ends up being pretty nice.