Would you like to inspect the original subtitles? These are the user uploaded subtitles that are being translated:
1
00:00:00,330 --> 00:00:07,200
Now that we have our card and card list components, the next thing that we want to add in is our search
2
00:00:07,200 --> 00:00:07,610
feature.
3
00:00:08,220 --> 00:00:16,560
So if we go into our final application, when we look at the search feature, what we see is a text
4
00:00:16,560 --> 00:00:24,460
box that takes a user's typed inputs and filters out the cards based on what they type in.
5
00:00:25,080 --> 00:00:33,750
So if I type in L e, it will filter out any monster whose name does not have l e in it.
6
00:00:34,590 --> 00:00:36,120
Now, how do we build this?
7
00:00:37,210 --> 00:00:40,840
Well, let's first go back to our application code.
8
00:00:42,380 --> 00:00:49,400
And what we first need is the HDMI element that will represent the text input and what we're going to
9
00:00:49,400 --> 00:00:52,640
use is an input HTML element.
10
00:00:53,810 --> 00:00:59,180
Now, these import HTML elements are pretty much just basic text inputs.
11
00:01:00,220 --> 00:01:06,220
If we put tape on it, which is a temo property that all inputs have.
12
00:01:07,310 --> 00:01:13,640
We can give it a different string and that string will help us get some features in the input that we
13
00:01:13,640 --> 00:01:16,140
might want for different types of inputs.
14
00:01:16,610 --> 00:01:22,550
For example, if we use password, whatever we type will become hidden.
15
00:01:24,760 --> 00:01:31,420
And well, the one we actually want will be search, and what search gives us is the ability to put
16
00:01:31,420 --> 00:01:32,860
on this placeholder.
17
00:01:34,630 --> 00:01:38,110
Which will essentially put a strain on their.
18
00:01:39,590 --> 00:01:47,660
When we haven't typed anything into the search field, so now we'll say search monsters and that is
19
00:01:47,660 --> 00:01:53,390
the placeholder, but once we type, we see that it gets hidden and then we can clear it away.
20
00:01:54,480 --> 00:01:55,710
With that little X button.
21
00:01:57,430 --> 00:02:04,060
So type search allows us to use that placeholder, but now what we need to do is we actually need to
22
00:02:04,060 --> 00:02:12,550
be able to hijack or take control whenever the user types something into the input, because we want
23
00:02:12,550 --> 00:02:15,400
to store that string on our state.
24
00:02:16,090 --> 00:02:22,400
And by storing it on our state, we're able to use it in order to actually filter out our monsters.
25
00:02:23,020 --> 00:02:26,380
So let's first figure out how to store that on our state.
26
00:02:27,660 --> 00:02:33,390
Well, the first thing we would do is actually add a field to our state that would represent what that
27
00:02:33,390 --> 00:02:34,560
store value will be.
28
00:02:34,800 --> 00:02:38,520
So we'll call it a search field and we'll make it start as an empty string.
29
00:02:40,700 --> 00:02:48,230
Next, what we'll do is we actually have access to this method on our input, called on change.
30
00:02:49,590 --> 00:02:59,610
And what on change does is it fires with this synthetic event, which is essentially just a event in
31
00:02:59,610 --> 00:03:01,380
our browser, right.
32
00:03:02,040 --> 00:03:06,030
Whenever the input is changed.
33
00:03:06,030 --> 00:03:08,430
So whenever the user types or removes anything.
34
00:03:09,000 --> 00:03:12,420
But let's just take a look at what that looks like and what we passed on.
35
00:03:12,420 --> 00:03:17,790
Change is actually this function where it represents the synthetic event we're talking about.
36
00:03:18,270 --> 00:03:18,540
Right.
37
00:03:18,540 --> 00:03:22,920
And for now, let's just console log E and we'll see what happens.
38
00:03:23,100 --> 00:03:28,200
Let's go to our browser and open up our terminal using right.
39
00:03:28,200 --> 00:03:30,090
Click and clicking inspect.
40
00:03:31,080 --> 00:03:32,490
And then hitting the console.
41
00:03:33,800 --> 00:03:41,480
Now, whenever we type anything into our input, we will see our on change fire, which was the function
42
00:03:41,480 --> 00:03:43,820
that we wrote that logs that synthetic event.
43
00:03:45,620 --> 00:03:52,910
We also see that it changes whenever we remove any of the characters, and this is because it's literally,
44
00:03:52,910 --> 00:04:01,400
as the method says, whenever the value in that input changes, fire might on change event.
45
00:04:02,280 --> 00:04:06,150
Fire the on change with whatever function we passed to it.
46
00:04:07,120 --> 00:04:13,330
And what we'll see on our synthetic event is that it's this huge object with all these things on it,
47
00:04:13,780 --> 00:04:19,930
and this is because it's a native event that the browser uses to do all kinds of different things.
48
00:04:19,930 --> 00:04:20,209
Right.
49
00:04:20,260 --> 00:04:25,360
It gives us a lot of control, but we actually don't need to worry about more than like ninety nine
50
00:04:25,360 --> 00:04:26,460
percent of the stuff on here.
51
00:04:27,010 --> 00:04:31,390
The main thing that we do want to look at is this target value.
52
00:04:31,840 --> 00:04:38,410
There's a get and there's a set, but that mainly means that we can either get the value of what target
53
00:04:38,410 --> 00:04:39,940
is or set the value.
54
00:04:39,940 --> 00:04:41,590
But we don't want to set the value.
55
00:04:41,590 --> 00:04:44,740
We just want to get the the actual target value.
56
00:04:44,920 --> 00:04:48,120
And what it will give us back is the timeline.
57
00:04:48,580 --> 00:04:49,600
And we can see.
58
00:04:50,570 --> 00:04:51,470
If we it.
59
00:04:53,550 --> 00:05:00,420
So when I say that, it gives us the HTML element, it's because it's the HTML element that fired the
60
00:05:00,420 --> 00:05:00,780
event.
61
00:05:01,080 --> 00:05:07,170
So if we now log it, we see that that's our input and we can actually hover over it and it'll tell
62
00:05:07,170 --> 00:05:09,930
us where on the page that element is.
63
00:05:10,530 --> 00:05:11,880
And there's our search element.
64
00:05:11,880 --> 00:05:12,180
Right.
65
00:05:13,170 --> 00:05:21,570
So what we want off of this is actually the value and value is a property on the input that will give
66
00:05:21,570 --> 00:05:23,960
us literally the string value that it holds.
67
00:05:24,660 --> 00:05:26,590
Right, and see as we type it.
68
00:05:27,540 --> 00:05:33,120
We're getting that string value and that's how we're going to be able to store that on our state.
69
00:05:34,510 --> 00:05:42,430
Now, how do we store this, we can do this by calling set state here the same way that we did when
70
00:05:42,430 --> 00:05:46,420
we got our users went inside of our component, did Mount Method.
71
00:05:47,350 --> 00:05:50,740
So what we can do is call this set state.
72
00:05:52,000 --> 00:05:59,560
And we can pass it that we want our search field value to be the target value.
73
00:06:00,960 --> 00:06:07,380
Now, if we wanted to see this actually persist, right, if we want to make sure that our state was
74
00:06:07,380 --> 00:06:16,260
being updated, normally what we would think to do is just console log after we call this dot set state.
75
00:06:17,410 --> 00:06:24,280
So we would think that if we called console log this dot state, that we would see our state update.
76
00:06:25,120 --> 00:06:26,640
Now, let's actually test this out.
77
00:06:29,380 --> 00:06:37,300
We see that as we type, it looks like our event is firing, but our search field key is always one
78
00:06:37,300 --> 00:06:43,390
letter behind, which means the first time we type D search field was actually not updated.
79
00:06:43,780 --> 00:06:44,170
Right.
80
00:06:44,710 --> 00:06:45,740
Why is this?
81
00:06:46,450 --> 00:06:52,420
Well, this is actually because set state is in a synchronous function call.
82
00:06:53,350 --> 00:07:02,020
So asynchronous versus synchronous is a big thing in JavaScript development, especially in react.
83
00:07:02,940 --> 00:07:08,260
Synchronous action is something that we can expect to happen almost immediately.
84
00:07:08,460 --> 00:07:12,750
It's something that pretty much happens in JavaScript, knows the amount of time it'll take.
85
00:07:13,740 --> 00:07:19,650
So JavaScript will wait for that thing to finish before it continues.
86
00:07:20,040 --> 00:07:20,430
Right.
87
00:07:21,060 --> 00:07:23,090
Running the rest of the code afterwards.
88
00:07:24,220 --> 00:07:33,970
An asynchronous action or event is something that actually takes an indefinite amount of time that JavaScript
89
00:07:33,970 --> 00:07:34,800
does not know.
90
00:07:35,170 --> 00:07:43,570
So what it does is it actually runs the rest of the code after and then when the asynchronous event
91
00:07:43,570 --> 00:07:47,650
finishes, it then runs that finished event.
92
00:07:48,280 --> 00:07:54,100
Now, I know this sounds confusing right now, but I promise that will cover it later when it makes
93
00:07:54,100 --> 00:07:55,580
more sense to do so.
94
00:07:56,200 --> 00:08:03,400
Right now, the main thing I want you to focus on is just that this set state is actually not happening
95
00:08:03,550 --> 00:08:10,150
immediately when we would expect it to, which means that, yes, our state will be updated with this
96
00:08:10,150 --> 00:08:11,590
value that we've set here.
97
00:08:12,010 --> 00:08:16,750
But it's not going to happen in the immediate sense that we would expect it to.
98
00:08:17,320 --> 00:08:18,940
Instead, what we would do.
99
00:08:20,050 --> 00:08:27,250
In order to log our state, there's actually a solution that React has given us, and it's going to
100
00:08:27,250 --> 00:08:31,300
be the second argument that we pass to set state.
101
00:08:32,250 --> 00:08:33,900
Now it's going to be a callback.
102
00:08:34,880 --> 00:08:41,179
Which runs after a set state is finished, so after that state has opted out state, it will run the
103
00:08:41,179 --> 00:08:46,250
function that we pass and here we can log this state.
104
00:08:47,490 --> 00:08:55,120
And here we'll see that when we type now we do see our newest, latest value.
105
00:08:55,950 --> 00:08:57,990
So that's a thing to remember what's at stake.
106
00:08:58,230 --> 00:09:05,400
If we wanted to see or do something with our state right after we said it, then we have to do it inside
107
00:09:05,400 --> 00:09:11,640
of this second argument function that will get called right after such state.
108
00:09:13,720 --> 00:09:20,950
OK, now that we have our search field being stored, let's actually filter out our monsters, but let's
109
00:09:20,950 --> 00:09:24,750
return our code back and get rid of this part that we don't need.
110
00:09:25,390 --> 00:09:26,830
So let's remove that.
111
00:09:28,150 --> 00:09:31,470
And then we don't need these brackets either.
112
00:09:33,620 --> 00:09:35,630
Because all we want to do.
113
00:09:38,520 --> 00:09:40,260
Is just color set, state value.
11028
Can't find what you're looking for?
Get subtitles in any language from opensubtitles.com, and translate them here.