Check out a free preview of the full Advanced React Patterns course:
The "Control Props & 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:

Integrate control props with the existing toggle component in a way that's generic to work with more complex components.

Get Unlimited Access Now

Transcript from the "Control Props & Exercise" Lesson

>> Kent C Dodds: Okay, so let's move on and try to integrate this with our existing toggle. So here we've got our internal set state. We're doing our state reducer thing. This one is, there's a fair amount of work you have to do, because now it's not only when on toggle happens, it's when any state changes.

[00:00:24] And this is a toggle component we're only managing the state of a single Boolean. And so we could probably get away with skipping this on state change prop. But we're using simple examples to teach practical patterns. And so we're going to over-engineer the simple example slightly so that you can apply this to more practical scenarios.

[00:00:50] And so in practical scenarios, you're managing more than just one item of state. And so having a general, some state changed. And here's what it was, prop is useful. So yeah, you'll be mostly working in this internal set state. You'll also be spending a little bit of time in default props.

[00:01:09] You'll create a more generic is controlled. So rather than is on controlled, you'll have a is controlled that accepts a prop. And then the getState as well. And then you'll just have to, everywhere that's using this.state, you'll use this.getState instead. And when it's all finished. Yeah, it's much the same thing that we had before, so.