Would you like to inspect the original subtitles? These are the user uploaded subtitles that are being translated:
1
00:00:02,166 --> 00:00:03,466
Instructor: In the last lecture,
2
00:00:03,466 --> 00:00:08,966
we learned about a very important concept of moving data
3
00:00:08,966 --> 00:00:14,166
from a child to a parent component by utilizing props
4
00:00:14,166 --> 00:00:16,200
to receive a function from the parent component
5
00:00:16,200 --> 00:00:17,866
to receive a function from the parent component
6
00:00:17,866 --> 00:00:20,466
which we call in the child component.
7
00:00:20,466 --> 00:00:24,000
And this is closely related to another,
8
00:00:24,000 --> 00:00:27,833
a key concept which we also already used
9
00:00:27,833 --> 00:00:29,466
without even knowing.
10
00:00:29,466 --> 00:00:33,400
And that's a concept called Lifting State Up.
11
00:00:33,400 --> 00:00:35,766
Now what is that about?
12
00:00:35,766 --> 00:00:38,800
Consider this basic Component Tree
13
00:00:38,800 --> 00:00:43,033
which is roughly what we have in this demo application
14
00:00:43,033 --> 00:00:45,333
where we have an app component
15
00:00:45,333 --> 00:00:47,766
which in turn renders and expenses
16
00:00:47,766 --> 00:00:50,833
and a new expense component.
17
00:00:50,833 --> 00:00:51,566
and a new expense component.
18
00:00:51,566 --> 00:00:52,966
Now, in this case,
19
00:00:52,966 --> 00:00:56,100
the new expense component is a component
20
00:00:56,100 --> 00:00:59,666
which generates some data, some state.
21
00:00:59,666 --> 00:01:02,200
In our example application,
22
00:01:02,200 --> 00:01:05,200
we are fetching some user input here.
23
00:01:05,200 --> 00:01:05,433
we are fetching some user input here.
24
00:01:05,433 --> 00:01:08,933
Now it is quite common that you do generate
25
00:01:08,933 --> 00:01:12,133
or fetch data in a component
26
00:01:12,133 --> 00:01:16,200
but that you might not need that data in that component.
27
00:01:16,200 --> 00:01:16,800
but that you might not need that data in that component.
28
00:01:16,800 --> 00:01:19,666
Instead, we need it in another component,
29
00:01:19,666 --> 00:01:21,266
in the expenses component.
30
00:01:21,266 --> 00:01:25,066
That's where this generated data is needed in the end,
31
00:01:25,066 --> 00:01:28,800
slightly transformed, packed into an object
32
00:01:28,800 --> 00:01:32,733
but it is the data we fetch in new expense.
33
00:01:32,733 --> 00:01:33,166
but it is the data we fetch in new expense.
34
00:01:33,166 --> 00:01:38,733
So naturally we would like to hand that data over
35
00:01:38,733 --> 00:01:40,433
but that doesn't work like this
36
00:01:40,433 --> 00:01:43,433
because we have no direct connection
37
00:01:43,433 --> 00:01:46,533
between two sibling components.
38
00:01:46,533 --> 00:01:46,933
between two sibling components.
39
00:01:46,933 --> 00:01:49,100
Instead, as you learned by now,
40
00:01:49,100 --> 00:01:53,633
we can only communicate from parent to child
41
00:01:53,633 --> 00:01:57,300
and from child to parent.
42
00:01:57,300 --> 00:02:00,733
That's why in such cases like we have it here,
43
00:02:00,733 --> 00:02:04,800
we utilize the closest component,
44
00:02:04,800 --> 00:02:08,233
the closest parent component which has direct
45
00:02:08,233 --> 00:02:12,600
or indirect access to both involved components
46
00:02:12,600 --> 00:02:15,166
in this case, the app component.
47
00:02:15,166 --> 00:02:15,566
in this case, the app component.
48
00:02:15,566 --> 00:02:18,900
The app component in our application has access
49
00:02:18,900 --> 00:02:22,266
to both the new expense and the expenses component
50
00:02:22,266 --> 00:02:22,300
to both the new expense and the expenses component
51
00:02:22,300 --> 00:02:29,433
because it renders both components in its returned JSX code,
52
00:02:29,433 --> 00:02:31,800
that's why we wanna utilize that.
53
00:02:31,800 --> 00:02:34,700
Because we can now store our state
54
00:02:34,700 --> 00:02:38,066
in that closest involved component.
55
00:02:38,066 --> 00:02:40,900
So in that parent component which has access
56
00:02:40,900 --> 00:02:43,166
to both involved components by lifting our state up.
57
00:02:43,166 --> 00:02:46,766
to both involved components by lifting our state up.
58
00:02:46,766 --> 00:02:52,200
So by passing our generated state data from the new expense
59
00:02:52,200 --> 00:02:54,500
to the app component.
60
00:02:54,500 --> 00:02:54,966
to the app component.
61
00:02:54,966 --> 00:02:56,800
And that's what we're already doing
62
00:02:56,800 --> 00:02:58,733
in this demo application.
63
00:02:58,733 --> 00:03:02,733
We're doing this by utilizing props,
64
00:03:02,733 --> 00:03:02,866
We're doing this by utilizing props,
65
00:03:02,866 --> 00:03:08,566
by calling the function we receive on the onAddExpense prop.
66
00:03:08,566 --> 00:03:11,533
That alone is not lifting the state up.
67
00:03:11,533 --> 00:03:13,366
That's just calling a function
68
00:03:13,366 --> 00:03:15,366
we receive through props.
69
00:03:15,366 --> 00:03:15,833
we receive through props.
70
00:03:15,833 --> 00:03:18,066
But then we do something important.
71
00:03:18,066 --> 00:03:22,366
We actually do pass data to that function
72
00:03:22,366 --> 00:03:24,100
which we call here.
73
00:03:24,100 --> 00:03:28,533
We pass the expense data to function we receive
74
00:03:28,533 --> 00:03:31,800
on the onAddExpense prop.
75
00:03:31,800 --> 00:03:34,533
So we're passing data to that function,
76
00:03:34,533 --> 00:03:38,266
and by doing that we're lifting that data,
77
00:03:38,266 --> 00:03:40,300
that state up.
78
00:03:40,300 --> 00:03:40,733
that state up.
79
00:03:40,733 --> 00:03:43,633
We're not keeping it in the new expense component.
80
00:03:43,633 --> 00:03:46,233
We're not keeping expense data there,
81
00:03:46,233 --> 00:03:50,633
instead, we are lifting it up to the app component
82
00:03:50,633 --> 00:03:55,633
so that in there we can use it like an AddExpenseHandler
83
00:03:55,633 --> 00:04:00,433
where at the moment we are logging it to the console.
84
00:04:00,433 --> 00:04:00,733
where at the moment we are logging it to the console.
85
00:04:00,733 --> 00:04:04,700
Now we're not yet managing that data as state here,
86
00:04:04,700 --> 00:04:07,500
instead, we're just logging it to a console.
87
00:04:07,500 --> 00:04:09,866
But in the next course section,
88
00:04:09,866 --> 00:04:15,066
we are going to manage this whole array here as state.
89
00:04:15,066 --> 00:04:19,399
And we are going to add the expense to that array.
90
00:04:19,399 --> 00:04:19,766
And we are going to add the expense to that array.
91
00:04:19,766 --> 00:04:23,100
And we are already passing down that array
92
00:04:23,100 --> 00:04:27,300
to the expenses component because that's the other part
93
00:04:27,300 --> 00:04:30,366
of this Lifting the State Up concept.
94
00:04:30,366 --> 00:04:30,700
of this Lifting the State Up concept.
95
00:04:30,700 --> 00:04:33,066
We are Lifting the State Up.
96
00:04:33,066 --> 00:04:36,966
We are passing data up to some parent component
97
00:04:36,966 --> 00:04:40,100
because we either need that data directly
98
00:04:40,100 --> 00:04:41,600
in the app component
99
00:04:41,600 --> 00:04:41,700
in the app component
100
00:04:41,700 --> 00:04:44,966
or as it's the case in our demo application.
101
00:04:44,966 --> 00:04:46,833
And as it is quite common,
102
00:04:46,833 --> 00:04:50,533
because we then wanna pass that data down
103
00:04:50,533 --> 00:04:54,066
to another component via props.
104
00:04:54,066 --> 00:04:57,366
That's what we did in the last course lecture.
105
00:04:57,366 --> 00:04:59,666
And that is an important concept.
106
00:04:59,666 --> 00:04:59,866
And that is an important concept.
107
00:04:59,866 --> 00:05:03,066
You will hear the term Lifting the State Up
108
00:05:03,066 --> 00:05:05,033
quite a bit when you were working
109
00:05:05,033 --> 00:05:07,666
with React also later in the course.
110
00:05:07,666 --> 00:05:09,400
And whenever you hear that,
111
00:05:09,400 --> 00:05:13,366
it is about moving data from a child component
112
00:05:13,366 --> 00:05:17,333
to some parent component to either use it there
113
00:05:17,333 --> 00:05:22,333
or to then pass it down to some other child component.
114
00:05:22,333 --> 00:05:23,800
And as a side note,
115
00:05:23,800 --> 00:05:27,600
this does not just work if you have the app component
116
00:05:27,600 --> 00:05:31,466
which interacts with two direct child components.
117
00:05:31,466 --> 00:05:31,700
which interacts with two direct child components.
118
00:05:31,700 --> 00:05:34,366
Instead in this example already,
119
00:05:34,366 --> 00:05:38,333
the new expense component is actually not the component
120
00:05:38,333 --> 00:05:41,700
which generates the data which we're passing up.
121
00:05:41,700 --> 00:05:42,000
which generates the data which we're passing up.
122
00:05:42,000 --> 00:05:44,866
Instead it's the ExpenseForm component
123
00:05:44,866 --> 00:05:46,833
which generates that data.
124
00:05:46,833 --> 00:05:50,166
It's that component which works with state
125
00:05:50,166 --> 00:05:54,266
and which fetches user input and stores user input.
126
00:05:54,266 --> 00:05:54,500
and which fetches user input and stores user input.
127
00:05:54,500 --> 00:05:59,166
And that component then passes up that fetched data
128
00:05:59,166 --> 00:06:01,566
to the new expense component.
129
00:06:01,566 --> 00:06:04,966
So here we are already Lifting State Up
130
00:06:04,966 --> 00:06:05,233
So here we are already Lifting State Up
131
00:06:05,233 --> 00:06:08,000
and then we're lifting it up even further
132
00:06:08,000 --> 00:06:10,933
to the app component since it's the app component
133
00:06:10,933 --> 00:06:13,933
which is then the first component in line
134
00:06:13,933 --> 00:06:16,900
which does not just have access to the new expense
135
00:06:16,900 --> 00:06:19,200
and ExpenseForm component but also
136
00:06:19,200 --> 00:06:21,166
to the expenses component.
137
00:06:21,166 --> 00:06:21,566
to the expenses component.
138
00:06:21,566 --> 00:06:24,366
And since the expenses component is the component
139
00:06:24,366 --> 00:06:26,233
where we need the data in the end,
140
00:06:26,233 --> 00:06:31,333
it is the app component where we wanna lift our state up to.
141
00:06:31,333 --> 00:06:31,900
it is the app component where we wanna lift our state up to.
142
00:06:31,900 --> 00:06:34,400
Now, as you will see throughout this course,
143
00:06:34,400 --> 00:06:37,900
it's not always that root app component
144
00:06:37,900 --> 00:06:40,366
to which you wanna lift your state up.
145
00:06:40,366 --> 00:06:45,366
Instead, the goal is to lift it up just as high as necessary
146
00:06:45,400 --> 00:06:48,900
in your Component Tree until you have a component
147
00:06:48,900 --> 00:06:51,800
which has both access to the components
148
00:06:51,800 --> 00:06:55,300
that generate data as well as the components
149
00:06:55,300 --> 00:06:57,233
that needs data,
150
00:06:57,233 --> 00:06:59,166
that might be the app component,
151
00:06:59,166 --> 00:07:01,700
but that could also be another component.
152
00:07:01,700 --> 00:07:04,800
Again, you are going to see those quite frequently
153
00:07:04,800 --> 00:07:06,100
throughout this course.
12057
Can't find what you're looking for?
Get subtitles in any language from opensubtitles.com, and translate them here.