useState

[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.

[00:00] So we have this cool little app here that's going to allow us to search through these blog posts and in the future We'll even be able to check on these check boxes, and it will autofill the search But right now nothing is happening when I'm typing in here. That's because we're not managing state yet. We need to

[00:17] Synchronize the UI with whatever the search is currently and so that is your objective in this first part of the exercise One other thing that I'll mention before I send you off into this is that this entire UI was already built for you if You're looking for more practice on Working with react elements and generating UI

[00:37] With react components and things then I would issue a challenge before you get started on this go into the The index TSX file here delete everything and try to build this from scratch That could be an interesting exercise for you personally if you want a little bit more practice In building out you eyes as you're just getting started on your react journey

[00:58] Once you're all ready to go then you're going to be using you state to manage the state of this search query You'll want to make sure that you keep it up to date as the user is typing so you're going to have an on change event on that input and Yeah, then we'll right now. We're just worrying about the search itself

[01:18] The emoji will be in there to kind of guide you where you're supposed to go and make changes and things So have a good time, and we'll see you when you're done

Learn React hooks to add interactivity to your apps and build dynamic websites. You'll learn the core React hooks including useState, useEffect, and useRef.

React Hooks

React Hooks

Transcript

useState

Transcript