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.
Afrikaans
Albanian
Amharic
Armenian
Azerbaijani
Basque
Belarusian
Bengali
Bosnian
Bulgarian
Catalan
Cebuano
Chichewa
Chinese (Simplified)
Chinese (Traditional)
Corsican
Croatian
Czech
Danish
Dutch
English
Esperanto
Estonian
Finnish
French
Frisian
Galician
Georgian
German
Greek
Gujarati
Haitian Creole
Hawaiian
Hungarian
Icelandic
Indonesian
Irish
Italian
Japanese
Kazakh
Khmer
Korean
Kurdish (Kurmanji)
Kyrgyz
Lao
Latvian
Lithuanian
Luxembourgish
Macedonian
Malagasy
Malay
Maltese
Maori
Mongolian
Myanmar (Burmese)
Nepali
Norwegian
Pashto
Polish
Portuguese
Romanian
Russian
Samoan
Serbian
Sesotho
Shona
Sinhala
Slovak
Slovenian
Somali
Spanish
Swahili
Swedish
Tajik
Thai
Turkish
Ukrainian
Urdu
Uzbek
Vietnamese
