Kent C. Dodds: 0:00 Now, we're going to take this compound components and make it even more flexible than it is already. Right now, we're making a clone of all the children and forwarding along the prompts that they need, but what if those children aren't direct children, but instead they're nested like we have here with this div?

0:18 The problem that we're going to face is the children that we have accessible as the prop children here, do not include all of the grandchildren as well. We've got the toggle on, toggle off, and then the div. That's the three children.

0:33 The fact that toggle button is a child of the div has no say in all this, so the question becomes, how do I get the implicit shared state down to this toggle button when it's nested in here?

0:45 That's your objective. Real-world projects that use this pattern. The Accordion from reach-ui uses this pattern to implicitly share state using React.createContext.

0:56 That's your objective here. Don't forget to look at the extra credit to do some custom hook validation. Kind of a good one. We'll see you on the other side of the exercise.