00:00 So now we want to be able to update this query whenever the user checks one of these checkboxes, and to do that we have to control the value. So here first we're going to do this without controlling the value, and then maybe it'll make a lot more sense why we have to set the value prop

00:16 on the input. So I'm going to make a function just as indicated by our friend the koala here, Cody, this handle check, which accepts a tag, which will be a string, and a checked boolean, and if it's checked then we'll set the query to be the query plus that tag, otherwise we'll

00:34 replace that tag. We could probably do a little bit better with this, so maybe including a space or something, but I'm going to just leave it in this simple version. Well here, let's just include a space right there, and then we can replace the tag. We can maybe add a trim right here,

00:51 but feel free to dive in a little bit deeper on this to make it a little more robust and avoid extra spaces and stuff. So we have our handle check right here. We're going to handle all of these inputs getting checked. So whenever these change, we'll say on change,

01:10 on this input, we'll take the event, and we can handle check. We're going to check and uncheck the dog based on the current value of checked for this particular input, and then this one

01:25 will be for our cat. So on change is event, handle check for the cat, and we'll do something similar for caterpillar. Caterpillar, there we go, and so now we are, with handle check,

01:45 we are updating the query. So if I click on caterpillar, then we'll see that this updates. If I uncheck it, then it updates again. So we are updating the search query, but we're not updating the input right here, and so we want to keep the query and like this query value and the input

02:03 in sync because it just makes more sense for the user what's going on here. So let's add value is query, and now we are controlling the value right here. So if I say check dog and uncheck dog, and then we check cat, uncheck cat, caterpillar, uncheck. So that's all working quite nicely. You

02:20 can check them all together and then uncheck them, and yeah, we could make this a little bit more robust, I think. But yeah, this will get us taken care of for this first part of the exercise. We still clearly have a couple of bugs in here, but the key takeaway here is that occasionally you

02:40 want to have control over what the input value of an input or even like you could do this with the select as well, but you want to have some control over the value of this input. And so you

02:56 specify the value prop, and now you're in charge of keeping it up to date as the user types. It just so happens we were kind of already doing that to keep the query state up to date, and so we didn't have to worry about the warning that we would get otherwise that says, hey, you're not taking into account what the user is trying to do to this thing. So we didn't have to worry about that

03:17 because we were already doing it, and then we added the capability for each one of these checkboxes to update the query to be something that includes those values. So there you go. That was an intro into controlled inputs. Awesome work.