Instructor: 0:00 Let's talk about control props. Control props is an implementation of something that's supported in React by default for form elements. That is the idea of controlled components.

0:12 Basically, here we have an input. If we wanted to control what that value was, then we can provide a value prop.

0:19 Then React will just no longer manage the state for the value by itself. It will allow you to totally 100 percent manage the state of this input, the value state specifically.

0:30 Because you're now responsible for keeping that state updated, you also probably want to know when React would be updating that state itself. That's what the onChange prop is all about. It passes you whatever React thinks it's necessary for you to update the state in the way that it would update.

0:48 It's like the suggested change that React would make to the value if it were making that change. That's why we get that event.target.value. That's React saying, "Hey, I'm not managing the state, but this is the value that I would send it to if I were responsible for updating the state."

1:06 With that, we can then update our own manage state and get a re-render to set that value to what we want it to be. The reason this is useful is because not only can you keep things synchronized with what React would do by itself, but you can also make programmatic changes to this value so that the user doesn't have to interact with the input for you to actually make changes.

1:28 With a state reducer pattern, you can modify how state changes are made but you can't determine when those state changes happen. The control prompts is like a step up above the state reducer pattern.

1:41 That's the idea behind control prompts. Is it gives you a mechanism to simulate this same type of behavior in your own components. We've got an example of synchronizing two inputs that you can go ahead and look at and play around with.

1:56 We've got two examples of real-world projects that implement this pattern you can take a look at as well. For your exercise, your job is to make it so that these two components stay synchronized with one another.

2:11 If I reset this and we go click on one or we click on the other, they stay in sync. That's something that wasn't possible with a state reducer because with the state reducer, I could only update this toggle state if I clicked on this toggle, but I can't update it myself by clicking on this one.

2:29 Let's take a look at how that all works down here. We now have this toggle component and we're using the useToggle, getting the props, and then rendering the switch.

2:37 We're taking this "on" property and we're aliasing it to controlled on and forwarding that on to the useToggle, getting the props, and then rendering the switch. We're taking this "on" property and we're aliasing it to controlled on and forwarding that on to the useToggle.

2:51 We're also taking this onChange and forwarding that on to useToggle. Then down here, we're using that toggle function component and rendering two of those where the on property is set, so this is being controlled, to this both on property that we're managing here with useState.

3:05 Then we have an onChange that points to this handle toggle change so when either one of those gets clicked on, we're going to run this code here, where first we check if the action that was performed is a toggle and we check with our own state if we've clicked too many times. If we have, then we'll just return.

3:23 Otherwise, we'll go ahead and update our own manage state and we'll increment the number of times clicked. Then down here below, we're also rendering this regular toggle right here without managing the onState, because we want to make sure that we support both use cases because they're both useful.

3:39 Go ahead, have some fun playing around with this exercise. I've got a lot of emoji comments for you to help guide you on your way because this one's a little bit more on the complicated side, but I think you'll enjoy it.

3:50 We've got a bunch of extra credits here for you for giving the user really nice and helpful warnings. Take a look at that example warnings file to see the types of warnings that you get for controlled inputs, and then see if you can implement those same kind of warnings for our controlled on state that we're going to be exposing in this useToggle hook.