Would you like to inspect the original subtitles? These are the user uploaded subtitles that are being translated:
1
00:00:02,180 --> 00:00:03,490
In the last lecture,
2
00:00:03,490 --> 00:00:08,490
we learned about a very important concept of moving data
3
00:00:08,990 --> 00:00:13,990
from a child to a parent component by utilizing props
4
00:00:14,180 --> 00:00:17,810
to receive a function from the parent component
5
00:00:17,810 --> 00:00:20,410
which we call in the child component.
6
00:00:20,410 --> 00:00:23,960
And this is closely related to another,
7
00:00:23,960 --> 00:00:27,790
a key concept which we also already used
8
00:00:27,790 --> 00:00:29,430
without even knowing.
9
00:00:29,430 --> 00:00:33,360
And that's a concept called Lifting State Up.
10
00:00:33,360 --> 00:00:34,823
Now what is that about?
11
00:00:35,720 --> 00:00:38,760
Consider this basic Component Tree
12
00:00:38,760 --> 00:00:42,990
which is roughly what we have in this demo application
13
00:00:42,990 --> 00:00:45,270
where we have an app component
14
00:00:45,270 --> 00:00:47,730
which in turn renders and expenses
15
00:00:47,730 --> 00:00:50,610
and a new expense component.
16
00:00:50,610 --> 00:00:52,000
Now, in this case,
17
00:00:52,000 --> 00:00:55,160
the new expense component is a component
18
00:00:55,160 --> 00:00:58,720
which generates some data, some state.
19
00:00:58,720 --> 00:01:01,250
In our example application,
20
00:01:01,250 --> 00:01:04,400
we are fetching some user input here.
21
00:01:04,400 --> 00:01:07,930
Now it is quite common that you do generate
22
00:01:07,930 --> 00:01:11,110
or fetch data in a component
23
00:01:11,110 --> 00:01:15,438
but that you might not need that data in that component.
24
00:01:15,438 --> 00:01:18,310
Instead, we need it in another component,
25
00:01:18,310 --> 00:01:19,930
in the expenses component.
26
00:01:19,930 --> 00:01:23,730
That's where this generated data is needed in the end,
27
00:01:23,730 --> 00:01:27,440
slightly transformed, packed into an object
28
00:01:27,440 --> 00:01:31,450
but it is the data we fetch in new expense.
29
00:01:31,450 --> 00:01:36,450
So naturally we would like to hand that data over
30
00:01:37,030 --> 00:01:38,730
but that doesn't work like this
31
00:01:38,730 --> 00:01:41,720
because we have no direct connection
32
00:01:41,720 --> 00:01:45,120
between two sibling components.
33
00:01:45,120 --> 00:01:47,290
Instead, as you learned by now,
34
00:01:47,290 --> 00:01:51,830
we can only communicate from parent to child
35
00:01:51,830 --> 00:01:54,183
and from child to parent.
36
00:01:55,480 --> 00:01:58,930
That's why in such cases like we have it here,
37
00:01:58,930 --> 00:02:02,990
we utilize the closest component,
38
00:02:02,990 --> 00:02:06,430
the closest parent component which has direct
39
00:02:06,430 --> 00:02:10,789
or indirect access to both involved components
40
00:02:10,789 --> 00:02:13,520
in this case, the app component.
41
00:02:13,520 --> 00:02:16,860
The app component in our application has access
42
00:02:16,860 --> 00:02:20,200
to both the new expense and the expenses component
43
00:02:20,200 --> 00:02:25,200
because it renders both components in its returned JSX code,
44
00:02:27,350 --> 00:02:29,700
that's why we wanna utilize that.
45
00:02:29,700 --> 00:02:32,630
Because we can now store our state
46
00:02:32,630 --> 00:02:35,970
in that closest involved component.
47
00:02:35,970 --> 00:02:38,820
So in that parent component which has access
48
00:02:38,820 --> 00:02:43,820
to both involved components by lifting our state up.
49
00:02:44,460 --> 00:02:49,460
So by passing our generated state data from the new expense
50
00:02:49,870 --> 00:02:51,910
to the app component.
51
00:02:51,910 --> 00:02:53,740
And that's what we're already doing
52
00:02:53,740 --> 00:02:55,670
in this demo application.
53
00:02:55,670 --> 00:02:59,230
We're doing this by utilizing props,
54
00:02:59,230 --> 00:03:04,230
by calling the function we receive on the onAddExpense prop.
55
00:03:04,910 --> 00:03:07,880
That alone is not lifting the state up.
56
00:03:07,880 --> 00:03:09,720
That's just calling a function
57
00:03:09,720 --> 00:03:11,970
we receive through props.
58
00:03:11,970 --> 00:03:14,230
But then we do something important.
59
00:03:14,230 --> 00:03:18,500
We actually do pass data to that function
60
00:03:18,500 --> 00:03:20,250
which we call here.
61
00:03:20,250 --> 00:03:24,690
We pass the expense data to function we receive
62
00:03:24,690 --> 00:03:27,093
on the onAddExpense prop.
63
00:03:27,960 --> 00:03:30,670
So we're passing data to that function,
64
00:03:30,670 --> 00:03:34,411
and by doing that we're lifting that data,
65
00:03:34,411 --> 00:03:36,600
that state up.
66
00:03:36,600 --> 00:03:39,530
We're not keeping it in the new expense component.
67
00:03:39,530 --> 00:03:42,100
We're not keeping expense data there,
68
00:03:42,100 --> 00:03:46,530
instead, we are lifting it up to the app component
69
00:03:46,530 --> 00:03:51,500
so that in there we can use it like an AddExpenseHandler
70
00:03:51,500 --> 00:03:55,690
where at the moment we are logging it to the console.
71
00:03:55,690 --> 00:03:59,660
Now we're not yet managing that data as state here,
72
00:03:59,660 --> 00:04:02,450
instead, we're just logging it to a console.
73
00:04:02,450 --> 00:04:04,830
But in the next course section,
74
00:04:04,830 --> 00:04:09,830
we are going to manage this whole array here as state.
75
00:04:10,030 --> 00:04:13,950
And we are going to add the expense to that array.
76
00:04:13,950 --> 00:04:17,269
And we are already passing down that array
77
00:04:17,269 --> 00:04:21,470
to the expenses component because that's the other part
78
00:04:21,470 --> 00:04:24,680
of this Lifting the State Up concept.
79
00:04:24,680 --> 00:04:27,050
We are Lifting the State Up.
80
00:04:27,050 --> 00:04:30,950
We are passing data up to some parent component
81
00:04:30,950 --> 00:04:34,070
because we either need that data directly
82
00:04:34,070 --> 00:04:35,490
in the app component
83
00:04:35,490 --> 00:04:38,760
or as it's the case in our demo application.
84
00:04:38,760 --> 00:04:40,600
And as it is quite common,
85
00:04:40,600 --> 00:04:44,310
because we then wanna pass that data down
86
00:04:44,310 --> 00:04:46,923
to another component via props.
87
00:04:47,860 --> 00:04:51,160
That's what we did in the last course lecture.
88
00:04:51,160 --> 00:04:53,550
And that is an important concept.
89
00:04:53,550 --> 00:04:56,740
You will hear the term Lifting the State Up
90
00:04:56,740 --> 00:04:58,730
quite a bit when you were working
91
00:04:58,730 --> 00:05:01,340
with React also later in the course.
92
00:05:01,340 --> 00:05:03,080
And whenever you hear that,
93
00:05:03,080 --> 00:05:07,060
it is about moving data from a child component
94
00:05:07,060 --> 00:05:11,010
to some parent component to either use it there
95
00:05:11,010 --> 00:05:15,063
or to then pass it down to some other child component.
96
00:05:16,020 --> 00:05:17,480
And as a side note,
97
00:05:17,480 --> 00:05:21,290
this does not just work if you have the app component
98
00:05:21,290 --> 00:05:25,230
which interacts with two direct child components.
99
00:05:25,230 --> 00:05:27,870
Instead in this example already,
100
00:05:27,870 --> 00:05:31,840
the new expense component is actually not the component
101
00:05:31,840 --> 00:05:35,350
which generates the data which we're passing up.
102
00:05:35,350 --> 00:05:38,230
Instead it's the ExpenseForm component
103
00:05:38,230 --> 00:05:40,190
which generates that data.
104
00:05:40,190 --> 00:05:43,530
It's that component which works with state
105
00:05:43,530 --> 00:05:47,590
and which fetches user input and stores user input.
106
00:05:47,590 --> 00:05:52,260
And that component then passes up that fetched data
107
00:05:52,260 --> 00:05:54,660
to the new expense component.
108
00:05:54,660 --> 00:05:58,150
So here we are already Lifting State Up
109
00:05:58,150 --> 00:06:00,900
and then we're lifting it up even further
110
00:06:00,900 --> 00:06:03,860
to the app component since it's the app component
111
00:06:03,860 --> 00:06:06,840
which is then the first component in line
112
00:06:06,840 --> 00:06:09,800
which does not just have access to the new expense
113
00:06:09,800 --> 00:06:12,130
and ExpenseForm component but also
114
00:06:12,130 --> 00:06:14,330
to the expenses component.
115
00:06:14,330 --> 00:06:17,110
And since the expenses component is the component
116
00:06:17,110 --> 00:06:18,980
where we need the data in the end,
117
00:06:18,980 --> 00:06:23,980
it is the app component where we wanna lift our state up to.
118
00:06:24,300 --> 00:06:26,830
Now, as you will see throughout this course,
119
00:06:26,830 --> 00:06:30,310
it's not always that root app component
120
00:06:30,310 --> 00:06:32,790
to which you wanna lift your state up.
121
00:06:32,790 --> 00:06:37,790
Instead, the goal is to lift it up just as high as necessary
122
00:06:37,800 --> 00:06:41,330
in your Component Tree until you have a component
123
00:06:41,330 --> 00:06:44,200
which has both access to the components
124
00:06:44,200 --> 00:06:47,730
that generate data as well as the components
125
00:06:47,730 --> 00:06:49,640
that needs data,
126
00:06:49,640 --> 00:06:51,590
that might be the app component,
127
00:06:51,590 --> 00:06:54,120
but that could also be another component.
128
00:06:54,120 --> 00:06:57,220
Again, you are going to see those quite frequently
129
00:06:57,220 --> 00:06:58,513
throughout this course.
10147
Can't find what you're looking for?
Get subtitles in any language from opensubtitles.com, and translate them here.