00:00 I'm not pulling any punches. This one is going to be a little bit more challenging. It is a bit of a mind bend We've got different variables. We need to call the reducer and then we need to like wait. This is suggested changes What is that? You're gonna be playing around with this one for a little bit So just prepare yourself

00:17 Emotionally for this the challenge you do have the diff tab if you want to check that out and like see what's the difference between What I'm doing. I think I'm doing it, right and hopefully that helps but yeah This isn't necessarily the easiest thing to implement and what makes it difficult is that you need to support both situations

00:34 You need to have one component or one hook that supports both being controlled and being uncontrolled with the same code paths So it is kind of interesting there will be like branches in your code, of course But like with the same hook you want to support both

00:48 So we have an uncontrolled toggle here that should be able to toggle forever and ever and that should never need to have anything special So if you pull open the app, you'll notice here's our toggle with an on change it and so it should be notified when there are

01:02 Changes, but that's it. And then we have two other toggles that are controlled So this on prop should control them and as I make changes to either one of them We're keeping them updated and we want to do similar to what we were doing with their reducer where we keep track of how many times they're clicked and

01:21 We will prevent them from being clicked any more than four times And so you'll notice that they are not in sync right now. And that's because the on state here is not going to It doesn't do anything and that's your job in this exercise is just to manage that

01:39 You also notice that we're not getting increments and that's because we haven't implemented the on change handler either So your job is to implement both the on prop and on change now This toggle component is a pretty lightweight component that just forwards into the use toggle hook that's where you're going to be doing most of the work and

01:57 And yeah, you need to handle like if I'm being given and anything for the on state then I need to use that for Measuring whether I'm currently on or off If I'm not then I need to use my own reducer

02:12 My reducers state for that state and in any case I need to call on change with What caused the change as well as what I would change it to if I was in charge So that way whoever is rendering me will be able to know what they should do Based on that situation. So here if we

02:33 If the action type is toggle then and the times clicked is more than four then we're going to return We're not going to do anything. We're controlling the state where we're not going to change the state otherwise, we'll update them both of the Toggles to have a state of on and we'll increment the number of times clicked

02:53 So the the on change handler needs to know what should the state be or what would it be if you were in charge? toggle component And an action and so it kind of looks like a reducer But it gives just enough information for people to make good decisions on what they do about the change that's happening

03:14 Okay, I think that should be enough for you to get going Like I said, this one's going to be a little bit more tricky than the other ones that you've done But I think that you'll enjoy it anyway, so let's get started