00:00 sometimes you want to programmatically change state. So here's a quick example of what's called a controlled input. This is the idea here is that you are now in charge of keeping the value of the input controlled or up-to-date. So here we're storing our value,

00:19 and we have our set value with our useState, and we're setting the value prop of the input to whatever the value of useState is. So if the user tries to type in here, they're not going to be able to change it because we're telling React, hey, I want the value to always be whatever the value of the state is. So if I get rid of this on change, we're going to actually get a warning here from React

00:39 because as the user types in here, React is making sure that, hey, no, the user can't change this because you said that the value should always be that state value. So that's why it's giving us this warning because it's saying, hey, you are setting the value, but you don't have any mechanism for determining when that value should change, or at least you're not

00:58 handling when the user is trying to change it. So we just are letting you know, if you really want this to be read-only, then you should say read-only, or you should add an onChangeHandler to handle what the user wants it to change to. The value of changing that input value comes in

01:18 programmatically determining what that input value should be. So if all you're doing is setting the value to what the user is actually typing, so if all we did was this, then it wouldn't actually be all that useful because it's literally just what we're doing. So there's no reason to put the value prop here, like it performs the same.

01:37 So the only time you ever really care to set the value explicitly like this, is if you are programmatically changing what the user would actually do here. So here, if I type in Cody the koala, then I'm replacing koala with a koala emoji, which I think is interesting.

01:56 But this is where controlled inputs are useful, is when you programmatically are making a change to what the value should be. So I like to think of this event currentTarget.value as a suggestion, like if I were in charge, this is the value I would set it to,

02:16 but you're in charge because you're setting the value, so you do whatever you want to with it. So that's the idea of a controlled input. We're going to be using that in our exercise because we want to be able to make it so that when the user checks the different checkboxes that we autofill the query with dog or cat or caterpillar or whatever.

02:33 So you're going to be controlling the input value just like this. Have a good time.