00:00 So here we go, we're going to add a useState right here to manage this string of the search. So we'll have useState, and this is going to be our query, and the useState function is going to come from React. And with that then, we also have the initial value we want this to have.

00:18 We want to initialize this as an empty string, because that's just how things are going to start out. And then we come down here to add an onChangeHandler. So this is how we're going to keep things up to date with our UI. Before we add that, let's actually make this query

00:36 have an impact on the posts that are matching. So here we have our matching post components taking that query, and then it's got this utility to get the matching post based on that query. So if we pass our query here, the default we had already was just an empty string. So we're not really changing anything here, but if we just want to test this out,

00:55 we can look for cat, and now we'll see we've got a different UI. So we are seeing that whatever this query value is, it's going to impact the UI that we're generating. And so our objective is just to make it so that this can be dynamic, so it can actually change over time.

01:12 So by putting it in this useState, we accomplish that by giving us a mechanism for updating that value. So with that, I'll change that back to an empty string, and we'll add an onChange here. So whenever this input is changed, then we want to take the event that we get from that input,

01:29 and we'll update the query to be the event current target value. So this current target is referring to the DOM node that's responsible for this event firing, which would be our input here. So if I select this and we go to the console $0.value, this is going to be the current value

01:48 of the input. If I type something in there and we look at the value, that's going to be the current value. So we get the current value out of that input, we put it into the setQuery state, and then that query can then be used to filter down the different posts that are displaying here.

02:06 So now with that in place, I can look for dog and cat and erpillar, and then I can mistype something and now nothing matches. So yeah, this is an interactive application now because we have this useState thrown in there. And this is just a hook into React to say, hey,

02:25 React, this component is going to need to change over time. We're going to need to have some state that we're managing. In our case, the initial value of that state will be a string. And then whenever we want to update that state, we'll call setQuery. React will be like, oh sweet, let me grab that

02:41 state that you're giving me, so that'll be our current target value. We'll grab that state, and I'm going to call your function again. And when you say, hey, I want to use that state again, then React will say, hey, here it is. This is what you gave me, and so now we can make the new UI based off of that state. One thing that's kind of interesting about all this is you could actually

03:01 have as many of these as you want, and React just keeps track of the order in which they are called. And so that's how it knows, like if this one was Boolean, and if this one was an object, and this one's an array, and they of course would all have different names here, React can keep track of those because of the order that they're called. They're always going to be

03:20 called in the same order because our code here is static. And so with that, whenever your app component is going to get re-rendered like this, then React says, okay, you're calling useState for the first time for this app component. I know the state that's stored there is this query string,

03:35 so I'll send that over to you. And then here we'll say, isBoolean, whatever. Set isBoolean. There we go. And so then the second time we call useState on this render, React is like, okay, this is the second time. Let me go grab the state that's in the second slot for the state for this

03:53 component, and I'll give you that current value of that state there. And then my object and set my object, of course, and let's just do it all for good measure. So we've got myArray and set

04:08 myArray. Now it's not complaining about these things. So then we call useState a third time as React. Okay, great. Now here's the third slot that I've got for useState. Here's the current state for that. So here you go, and here's a mechanism for updating that one. So that's how

04:24 it works. You can call useState as many times as you like inside of your component, and React will just keep track of them each individually, and you'll have a mechanism for updating each one as you like. In our case, though, it's just a simple query, setQuery. We added this onChange to keep that updated, and then we're passing that query to the matching post, and it's working

04:43 swimmingly. Awesome job.