Original subtitles

OK, now that we have our search field value stored on our state, let's actually use it to filter out

the monsters where their names don't match the field.

Now, how we'll do this is in the render.

We don't want to actually modify our state's monster array because we want to keep the raw data in case

somewhere in this component we need to use the base unmodified array.

What we'll do instead is make a new array using the dot filter method that we've learned.

So what we'll do is we'll actually first use a concept called structuring.

And what the structuring allows us to do is pull properties off of an object and set them to constants

that we put inside of here.

So the syntax is we say CONSED and then we put our bracket notation.

And here will use the actual objects we want a D structure from, so the state object is what we want

to pull the properties off of.

And what we want to do is use the same property name that we want to set as the constant, so when we

say monsters and search field like this will be pulling off the search field value and the monster's

value off of our state object and setting them to constants called monsters and search field, this

is the equivalent of saying Konsta monsters equals this state monsters and this and consed search field.

Is equal to this state search field.

It's just an easier way and a quicker way for us to write this out.

And now that we have our monsters and search field, what we'll do is set a new contest called Filtered

Monsters.

That we will set as our monsters don't filter right, and we are from our filter method, we get back

a new array based off of the function that we pass into it where we'll get the monster that it's currently

iterating over.

And what we want to do is take the name.

Called to lower case on it, which is a method on all strings, and here we see convert's, all the

AlphaBeta characters in a string to lowercase, and we want to do this because we don't want our search

to be case sensitive.

If we did, we would just not use the two lowercase and then we'll call DOT includes.

And what this includes method does is similar to our array method.

It just checks whether or not the string value we pass inside of our includes.

Is actually in the string that it's being called on, so here we'll use our search field and we also

want to lowercase it.

Because, again, we want to make sure that if the user types in capitals, we don't want that to be

case sensitive either.

So includes just like the array method includes, will return true or false, based off of whether or

not this string includes the string we're passing to it.

And now, instead of passing in our state of monsters, we'll just pass in our new filtered monsters

and now we see that as we type.

We're filtering out the monsters that don't have what we've typed in inside of their name.

Now, you'll notice that our component is actually re rendering every time.

This is because whenever set state is called and the properties change, react, renders our component,

it recalls the render method, which means that our filtered monsters method here is actually getting

called again.

And this is great because what we've done is we've triggered this set state whenever they've type something

in which in turn sets the state value of search field, which then in turn causes our component to re

render and recall the render method.

Which then filters out the monsters by calling our monsters dot filter again, setting a new array,

which it'll then pass to our card list, which then renders card lists.

And this way we're able to just dynamically live update our card list based on what we're typing in.

And this is what's great about react is that React is able to take control of what to render, what

to render in its views without us having to do all of the extensive calls of showing elements and hiding

elements react, is able to do so for us.

As long as we understand the rules now, we will definitely explore this in greater depth a little bit

later, because right now we have to just expand upon some other concepts.

But I promise you that we will take a deeper dive into how this works in just a little bit.