Would you like to inspect the original subtitles? These are the user uploaded subtitles that are being translated:
1
00:00:00,590 --> 00:00:07,760
OK, now that we have our search field value stored on our state, let's actually use it to filter out
2
00:00:07,760 --> 00:00:11,070
the monsters where their names don't match the field.
3
00:00:11,900 --> 00:00:15,140
Now, how we'll do this is in the render.
4
00:00:16,120 --> 00:00:24,730
We don't want to actually modify our state's monster array because we want to keep the raw data in case
5
00:00:24,730 --> 00:00:30,330
somewhere in this component we need to use the base unmodified array.
6
00:00:31,810 --> 00:00:39,090
What we'll do instead is make a new array using the dot filter method that we've learned.
7
00:00:40,390 --> 00:00:46,450
So what we'll do is we'll actually first use a concept called structuring.
8
00:00:47,420 --> 00:00:55,610
And what the structuring allows us to do is pull properties off of an object and set them to constants
9
00:00:55,910 --> 00:00:58,180
that we put inside of here.
10
00:00:58,820 --> 00:01:04,580
So the syntax is we say CONSED and then we put our bracket notation.
11
00:01:06,250 --> 00:01:14,050
And here will use the actual objects we want a D structure from, so the state object is what we want
12
00:01:14,050 --> 00:01:15,580
to pull the properties off of.
13
00:01:16,700 --> 00:01:24,860
And what we want to do is use the same property name that we want to set as the constant, so when we
14
00:01:24,860 --> 00:01:32,720
say monsters and search field like this will be pulling off the search field value and the monster's
15
00:01:32,720 --> 00:01:40,970
value off of our state object and setting them to constants called monsters and search field, this
16
00:01:40,970 --> 00:01:49,820
is the equivalent of saying Konsta monsters equals this state monsters and this and consed search field.
17
00:01:51,610 --> 00:01:54,250
Is equal to this state search field.
18
00:01:55,520 --> 00:02:00,850
It's just an easier way and a quicker way for us to write this out.
19
00:02:03,420 --> 00:02:09,570
And now that we have our monsters and search field, what we'll do is set a new contest called Filtered
20
00:02:09,570 --> 00:02:10,259
Monsters.
21
00:02:11,960 --> 00:02:19,070
That we will set as our monsters don't filter right, and we are from our filter method, we get back
22
00:02:19,070 --> 00:02:26,330
a new array based off of the function that we pass into it where we'll get the monster that it's currently
23
00:02:26,330 --> 00:02:27,260
iterating over.
24
00:02:28,610 --> 00:02:31,970
And what we want to do is take the name.
25
00:02:33,190 --> 00:02:39,580
Called to lower case on it, which is a method on all strings, and here we see convert's, all the
26
00:02:39,580 --> 00:02:45,190
AlphaBeta characters in a string to lowercase, and we want to do this because we don't want our search
27
00:02:45,190 --> 00:02:46,840
to be case sensitive.
28
00:02:47,380 --> 00:02:53,760
If we did, we would just not use the two lowercase and then we'll call DOT includes.
29
00:02:54,310 --> 00:02:58,630
And what this includes method does is similar to our array method.
30
00:02:59,050 --> 00:03:04,390
It just checks whether or not the string value we pass inside of our includes.
31
00:03:05,370 --> 00:03:13,710
Is actually in the string that it's being called on, so here we'll use our search field and we also
32
00:03:13,710 --> 00:03:15,270
want to lowercase it.
33
00:03:16,370 --> 00:03:25,100
Because, again, we want to make sure that if the user types in capitals, we don't want that to be
34
00:03:25,100 --> 00:03:26,120
case sensitive either.
35
00:03:27,040 --> 00:03:33,610
So includes just like the array method includes, will return true or false, based off of whether or
36
00:03:33,610 --> 00:03:38,790
not this string includes the string we're passing to it.
37
00:03:39,860 --> 00:03:46,790
And now, instead of passing in our state of monsters, we'll just pass in our new filtered monsters
38
00:03:47,540 --> 00:03:50,300
and now we see that as we type.
39
00:03:52,940 --> 00:03:58,850
We're filtering out the monsters that don't have what we've typed in inside of their name.
40
00:04:00,000 --> 00:04:04,950
Now, you'll notice that our component is actually re rendering every time.
41
00:04:06,110 --> 00:04:13,790
This is because whenever set state is called and the properties change, react, renders our component,
42
00:04:14,600 --> 00:04:22,700
it recalls the render method, which means that our filtered monsters method here is actually getting
43
00:04:22,700 --> 00:04:23,480
called again.
44
00:04:24,200 --> 00:04:31,910
And this is great because what we've done is we've triggered this set state whenever they've type something
45
00:04:31,910 --> 00:04:41,090
in which in turn sets the state value of search field, which then in turn causes our component to re
46
00:04:41,090 --> 00:04:43,730
render and recall the render method.
47
00:04:44,740 --> 00:04:52,480
Which then filters out the monsters by calling our monsters dot filter again, setting a new array,
48
00:04:52,750 --> 00:04:57,870
which it'll then pass to our card list, which then renders card lists.
49
00:04:58,270 --> 00:05:07,870
And this way we're able to just dynamically live update our card list based on what we're typing in.
50
00:05:09,760 --> 00:05:18,160
And this is what's great about react is that React is able to take control of what to render, what
51
00:05:18,160 --> 00:05:26,650
to render in its views without us having to do all of the extensive calls of showing elements and hiding
52
00:05:26,650 --> 00:05:30,930
elements react, is able to do so for us.
53
00:05:30,970 --> 00:05:39,190
As long as we understand the rules now, we will definitely explore this in greater depth a little bit
54
00:05:39,190 --> 00:05:45,360
later, because right now we have to just expand upon some other concepts.
55
00:05:45,730 --> 00:05:53,970
But I promise you that we will take a deeper dive into how this works in just a little bit.
6013
Can't find what you're looking for?
Get subtitles in any language from opensubtitles.com, and translate them here.