Would you like to inspect the original subtitles? These are the user uploaded subtitles that are being translated:
1
00:00:01,500 --> 00:00:08,730
Hey, it's Andre here, some of you might be wondering why we don't add state to search box.
2
00:00:08,970 --> 00:00:16,560
I mean, it looks like what we're doing is adding the on change over here, giving it a function, and
3
00:00:16,560 --> 00:00:22,440
this function goes up a level and letting our apgar's know that there was an event.
4
00:00:23,130 --> 00:00:28,770
But search box, shouldn't that have the search field state?
5
00:00:29,290 --> 00:00:30,130
Let's explore that.
6
00:00:30,460 --> 00:00:32,729
Now, I want you to think about this.
7
00:00:32,759 --> 00:00:35,640
Why wouldn't we put state here?
8
00:00:37,060 --> 00:00:38,570
Pause avideo, think about it.
9
00:00:38,770 --> 00:00:39,610
Let's find out what.
10
00:00:40,960 --> 00:00:47,860
Remember our third point over here, a good reactive holper decide, decides what changes when state
11
00:00:47,860 --> 00:00:48,480
changes.
12
00:00:49,150 --> 00:00:50,200
Let's think about this.
13
00:00:51,630 --> 00:00:59,400
Now, the reason we don't change the state in search box and instead we trigger whenever an event happens
14
00:00:59,730 --> 00:01:07,890
to handle change up here in Ajaz is because our other component card list needs to have that information
15
00:01:07,920 --> 00:01:08,290
right.
16
00:01:08,460 --> 00:01:16,410
Remember, the way we filtered monsters was by using the search field state to filter based on the user
17
00:01:16,410 --> 00:01:16,800
input.
18
00:01:17,950 --> 00:01:24,010
So the way to think about this is like, so if we had our app over here and this is our objets, and
19
00:01:24,010 --> 00:01:28,720
in here we have the search component and the card list component.
20
00:01:29,890 --> 00:01:38,290
If the state was only here in the search box component, there's no way for the Kahless component to
21
00:01:38,290 --> 00:01:39,120
find out about it.
22
00:01:39,250 --> 00:01:44,170
Remember, because of one way dataflow data can only flow one way.
23
00:01:44,410 --> 00:01:51,900
So there's no way for, let's say, the search for state to move up and down to the cardless component.
24
00:01:52,690 --> 00:02:00,490
So instead, we want to place the state in a place where it gives us access to whatever needs it.
25
00:02:00,700 --> 00:02:07,120
In our case, both Carlist and search box need that state, that search field state.
26
00:02:07,270 --> 00:02:08,320
So we move it up.
27
00:02:08,979 --> 00:02:16,960
And the way we architect things and react is that when an event happens on a component, let's say a
28
00:02:16,960 --> 00:02:25,720
user clicks or type something, well, that event triggers the react event system and says, hey, something
29
00:02:25,780 --> 00:02:26,350
has happened.
30
00:02:26,650 --> 00:02:31,450
Create an event handler like handle input or handle change.
31
00:02:31,960 --> 00:02:39,400
And it's going to go up and let the component that has that state know that, hey, something has happened.
32
00:02:39,400 --> 00:02:43,270
You need to update state and how far up that goes.
33
00:02:43,270 --> 00:02:45,190
Let's say we had a component underneath this.
34
00:02:45,460 --> 00:02:52,990
We notify the component that has the state as far up as we need to in order to pass down that information
35
00:02:52,990 --> 00:02:55,330
to the components that need that information.
36
00:02:55,930 --> 00:02:58,510
Now, if you don't get this right away, don't worry.
37
00:02:58,510 --> 00:03:03,280
This is something that comes with practice that we're going to explore throughout the course as we build
38
00:03:03,280 --> 00:03:04,310
more and more projects.
39
00:03:04,330 --> 00:03:12,130
But I want you to pay attention that you want to decide as a reactive helper what changes, what events
40
00:03:12,130 --> 00:03:17,320
that the user's take, how far up it goes to let the state know.
41
00:03:17,890 --> 00:03:24,700
And you want to move the state in a high enough position so that we are still able to pass down that
42
00:03:24,700 --> 00:03:27,940
information to different notes, but at the same time.
43
00:03:28,860 --> 00:03:36,390
If we had, let's say, a state in here that the only people that care about it is these two components.
44
00:03:37,170 --> 00:03:41,630
Well, if that's the case, there's no point bringing up the state all the way up here.
45
00:03:41,850 --> 00:03:46,440
You want to place the state over here because all these components don't really care about any of this.
46
00:03:47,170 --> 00:03:49,710
Again, this is a topic that will cover a lot more.
47
00:03:49,980 --> 00:03:52,920
And structuring state is a very big topic.
48
00:03:52,920 --> 00:03:55,650
And yet but I want you to start noticing these things.
49
00:03:56,960 --> 00:03:57,520
Let's keep going.
4838
Can't find what you're looking for?
Get subtitles in any language from opensubtitles.com, and translate them here.