Original subtitles

Now that we have our card and card list components, the next thing that we want to add in is our search

feature.

So if we go into our final application, when we look at the search feature, what we see is a text

box that takes a user's typed inputs and filters out the cards based on what they type in.

So if I type in L e, it will filter out any monster whose name does not have l e in it.

Now, how do we build this?

Well, let's first go back to our application code.

And what we first need is the HDMI element that will represent the text input and what we're going to

use is an input HTML element.

Now, these import HTML elements are pretty much just basic text inputs.

If we put tape on it, which is a temo property that all inputs have.

We can give it a different string and that string will help us get some features in the input that we

might want for different types of inputs.

For example, if we use password, whatever we type will become hidden.

And well, the one we actually want will be search, and what search gives us is the ability to put

on this placeholder.

Which will essentially put a strain on their.

When we haven't typed anything into the search field, so now we'll say search monsters and that is

the placeholder, but once we type, we see that it gets hidden and then we can clear it away.

With that little X button.

So type search allows us to use that placeholder, but now what we need to do is we actually need to

be able to hijack or take control whenever the user types something into the input, because we want

to store that string on our state.

And by storing it on our state, we're able to use it in order to actually filter out our monsters.

So let's first figure out how to store that on our state.

Well, the first thing we would do is actually add a field to our state that would represent what that

store value will be.

So we'll call it a search field and we'll make it start as an empty string.

Next, what we'll do is we actually have access to this method on our input, called on change.

And what on change does is it fires with this synthetic event, which is essentially just a event in

our browser, right.

Whenever the input is changed.

So whenever the user types or removes anything.

But let's just take a look at what that looks like and what we passed on.

Change is actually this function where it represents the synthetic event we're talking about.

Right.

And for now, let's just console log E and we'll see what happens.

Let's go to our browser and open up our terminal using right.

Click and clicking inspect.

And then hitting the console.

Now, whenever we type anything into our input, we will see our on change fire, which was the function

that we wrote that logs that synthetic event.

We also see that it changes whenever we remove any of the characters, and this is because it's literally,

as the method says, whenever the value in that input changes, fire might on change event.

Fire the on change with whatever function we passed to it.

And what we'll see on our synthetic event is that it's this huge object with all these things on it,

and this is because it's a native event that the browser uses to do all kinds of different things.

Right.

It gives us a lot of control, but we actually don't need to worry about more than like ninety nine

percent of the stuff on here.

The main thing that we do want to look at is this target value.

There's a get and there's a set, but that mainly means that we can either get the value of what target

is or set the value.

But we don't want to set the value.

We just want to get the the actual target value.

And what it will give us back is the timeline.

And we can see.

If we it.

So when I say that, it gives us the HTML element, it's because it's the HTML element that fired the

event.

So if we now log it, we see that that's our input and we can actually hover over it and it'll tell

us where on the page that element is.

And there's our search element.

Right.

So what we want off of this is actually the value and value is a property on the input that will give

us literally the string value that it holds.

Right, and see as we type it.

We're getting that string value and that's how we're going to be able to store that on our state.

Now, how do we store this, we can do this by calling set state here the same way that we did when

we got our users went inside of our component, did Mount Method.

So what we can do is call this set state.

And we can pass it that we want our search field value to be the target value.

Now, if we wanted to see this actually persist, right, if we want to make sure that our state was

being updated, normally what we would think to do is just console log after we call this dot set state.

So we would think that if we called console log this dot state, that we would see our state update.

Now, let's actually test this out.

We see that as we type, it looks like our event is firing, but our search field key is always one

letter behind, which means the first time we type D search field was actually not updated.

Right.

Why is this?

Well, this is actually because set state is in a synchronous function call.

So asynchronous versus synchronous is a big thing in JavaScript development, especially in react.

Synchronous action is something that we can expect to happen almost immediately.

It's something that pretty much happens in JavaScript, knows the amount of time it'll take.

So JavaScript will wait for that thing to finish before it continues.

Right.

Running the rest of the code afterwards.

An asynchronous action or event is something that actually takes an indefinite amount of time that JavaScript

does not know.

So what it does is it actually runs the rest of the code after and then when the asynchronous event

finishes, it then runs that finished event.

Now, I know this sounds confusing right now, but I promise that will cover it later when it makes

more sense to do so.

Right now, the main thing I want you to focus on is just that this set state is actually not happening

immediately when we would expect it to, which means that, yes, our state will be updated with this

value that we've set here.

But it's not going to happen in the immediate sense that we would expect it to.

Instead, what we would do.

In order to log our state, there's actually a solution that React has given us, and it's going to

be the second argument that we pass to set state.

Now it's going to be a callback.

Which runs after a set state is finished, so after that state has opted out state, it will run the

function that we pass and here we can log this state.

And here we'll see that when we type now we do see our newest, latest value.

So that's a thing to remember what's at stake.

If we wanted to see or do something with our state right after we said it, then we have to do it inside

of this second argument function that will get called right after such state.

OK, now that we have our search field being stored, let's actually filter out our monsters, but let's

return our code back and get rid of this part that we don't need.

So let's remove that.

And then we don't need these brackets either.

Because all we want to do.

Is just color set, state value.