Would you like to inspect the original subtitles? These are the user uploaded subtitles that are being translated:
1
00:00:02,133 --> 00:00:04,966
Maximilian: How can we make this component reusable?
2
00:00:04,966 --> 00:00:08,966
Well, the good news is we can already reuse it.
3
00:00:08,966 --> 00:00:11,366
In App.js, where I'm using it,
4
00:00:11,366 --> 00:00:14,933
we can simply copy that line and paste it in.
5
00:00:14,933 --> 00:00:15,133
we can simply copy that line and paste it in.
6
00:00:15,133 --> 00:00:16,332
And if we save everything,
7
00:00:16,332 --> 00:00:19,033
we got the two ExpenseItems already.
8
00:00:19,033 --> 00:00:22,900
So that was easy. It's super easy to reuse a component.
9
00:00:22,900 --> 00:00:23,000
So that was easy. It's super easy to reuse a component.
10
00:00:23,000 --> 00:00:24,900
You can use it as often as you want.
11
00:00:24,900 --> 00:00:27,366
You can add it two more times
12
00:00:27,366 --> 00:00:30,466
and have four ExpenseItems overall.
13
00:00:30,466 --> 00:00:30,633
and have four ExpenseItems overall.
14
00:00:30,633 --> 00:00:32,700
That will work.
15
00:00:32,700 --> 00:00:36,533
But, of course, at the moment it's not really reusable.
16
00:00:36,533 --> 00:00:38,666
Yes, it's technically more than once,
17
00:00:38,666 --> 00:00:41,833
but it's always displaying the same data.
18
00:00:41,833 --> 00:00:42,700
And the reason for that
19
00:00:42,700 --> 00:00:46,766
is that the data is baked into this component.
20
00:00:46,766 --> 00:00:47,333
is that the data is baked into this component.
21
00:00:47,333 --> 00:00:50,666
Now, think about regular JavaScript
22
00:00:50,666 --> 00:00:53,433
without React for a second.
23
00:00:53,433 --> 00:00:57,966
There, I mentioned early already, we also use functions
24
00:00:57,966 --> 00:01:03,033
to split functionality across multiple smaller codebases
25
00:01:03,033 --> 00:01:06,133
and also to have reusable functions
26
00:01:06,133 --> 00:01:09,033
which we can call multiple times.
27
00:01:09,033 --> 00:01:09,433
which we can call multiple times.
28
00:01:09,433 --> 00:01:13,000
Now, when we write functions in JavaScript,
29
00:01:13,000 --> 00:01:15,866
then we make these functions reusable
30
00:01:15,866 --> 00:01:18,433
by accepting parameters.
31
00:01:18,433 --> 00:01:22,333
And that allows us to call one of the same function
32
00:01:22,333 --> 00:01:25,633
with different parameter values.
33
00:01:25,633 --> 00:01:25,766
with different parameter values.
34
00:01:25,766 --> 00:01:29,666
And, therefore, the function may and typically will produce
35
00:01:29,666 --> 00:01:32,866
different results for different input values,
36
00:01:32,866 --> 00:01:36,766
but it's still always the same function being called.
37
00:01:36,766 --> 00:01:40,233
And React basically has the same concept built in.
38
00:01:40,233 --> 00:01:43,066
We can make our components reusable
39
00:01:43,066 --> 00:01:49,500
by using parameters and a concept called props in React.
40
00:01:49,500 --> 00:01:52,533
Let's say in your App component,
41
00:01:52,533 --> 00:01:57,266
you have a goalItem variable or constant defined
42
00:01:57,266 --> 00:02:00,333
which holds a string of Finish!
43
00:02:00,333 --> 00:02:02,866
And then let's say you have a custom component,
44
00:02:02,866 --> 00:02:05,266
the CourseGoalItem component,
45
00:02:05,266 --> 00:02:07,666
which has a list item inside of it
46
00:02:07,666 --> 00:02:10,699
where this goalItem should be output.
47
00:02:10,699 --> 00:02:12,166
That's just another example,
48
00:02:12,166 --> 00:02:13,666
not the code we've been working on,
49
00:02:13,666 --> 00:02:15,733
but it's another example.
50
00:02:15,733 --> 00:02:15,966
but it's another example.
51
00:02:15,966 --> 00:02:17,466
We can have a custom component
52
00:02:17,466 --> 00:02:19,333
which should output a list item
53
00:02:19,333 --> 00:02:23,133
where the goalItem should be output dynamically.
54
00:02:23,133 --> 00:02:27,200
The problem is that the goalItem variable lives
55
00:02:27,200 --> 00:02:31,600
in the App component, not in the CourseGoalItem component.
56
00:02:31,600 --> 00:02:31,800
in the App component, not in the CourseGoalItem component.
57
00:02:31,800 --> 00:02:33,766
And to a certain extent, that is good
58
00:02:33,766 --> 00:02:36,933
because it makes the CourseGoalItem independent
59
00:02:36,933 --> 00:02:40,533
if it doesn't store the concrete value internally.
60
00:02:40,533 --> 00:02:41,933
But, of course, we wanna define
61
00:02:41,933 --> 00:02:44,333
what's being output by CourseGoalItem
62
00:02:44,333 --> 00:02:47,300
with help of the variable managed in App.
63
00:02:47,300 --> 00:02:51,666
And we don't have direct access to the HTML code output
64
00:02:51,666 --> 00:02:55,433
by some component in other components.
65
00:02:55,433 --> 00:02:55,566
by some component in other components.
66
00:02:55,566 --> 00:02:58,800
We can't just send our stored data there,
67
00:02:58,800 --> 00:03:02,433
but, instead, we can utilize a concept called props.
68
00:03:02,433 --> 00:03:02,700
but, instead, we can utilize a concept called props.
69
00:03:02,700 --> 00:03:07,000
We can pass data to the custom component
70
00:03:07,000 --> 00:03:09,400
by adding a attribute.
71
00:03:09,400 --> 00:03:11,466
And inside of that component,
72
00:03:11,466 --> 00:03:14,633
we can then get access to all these attributes
73
00:03:14,633 --> 00:03:18,666
which might have been set on our custom component.
74
00:03:18,666 --> 00:03:18,900
which might have been set on our custom component.
75
00:03:18,900 --> 00:03:20,600
Again, we're basically building
76
00:03:20,600 --> 00:03:23,733
our own custom HTML elements.
77
00:03:23,733 --> 00:03:23,800
our own custom HTML elements.
78
00:03:23,800 --> 00:03:28,566
And just as HTML elements can have attributes,
79
00:03:28,566 --> 00:03:31,066
it turns out that with React,
80
00:03:31,066 --> 00:03:34,533
our own custom components can also have attributes.
81
00:03:34,533 --> 00:03:34,766
our own custom components can also have attributes.
82
00:03:34,766 --> 00:03:38,066
There, this concept is just called props
83
00:03:38,066 --> 00:03:39,933
instead of attributes.
84
00:03:39,933 --> 00:03:40,133
instead of attributes.
85
00:03:40,133 --> 00:03:43,566
And props simply stands for properties.
86
00:03:43,566 --> 00:03:48,600
We can set properties of our own custom components.
87
00:03:48,600 --> 00:03:52,133
Now, how does this props concept work though?
88
00:03:52,133 --> 00:03:52,533
Now, how does this props concept work though?
89
00:03:52,533 --> 00:03:56,100
In ExpenseItem, we have the date, the title, and the amount,
90
00:03:56,100 --> 00:03:56,133
In ExpenseItem, we have the date, the title, and the amount,
91
00:03:56,133 --> 00:03:58,466
and we'd like to output this here,
92
00:03:58,466 --> 00:03:58,800
and we'd like to output this here,
93
00:03:58,800 --> 00:04:04,166
but it shouldn't be stored in here but instead in App.js.
94
00:04:04,166 --> 00:04:04,733
but it shouldn't be stored in here but instead in App.js.
95
00:04:04,733 --> 00:04:08,000
There, indeed, in this App component,
96
00:04:08,000 --> 00:04:11,166
we could have another constant or variable,
97
00:04:11,166 --> 00:04:16,399
expenses, which is an array, so multiple expense items.
98
00:04:16,399 --> 00:04:17,866
And let's say every expense here
99
00:04:17,866 --> 00:04:20,166
is a simple JavaScript object
100
00:04:20,166 --> 00:04:24,866
which now has a title like Car Insurance,
101
00:04:24,866 --> 00:04:25,200
which now has a title like Car Insurance,
102
00:04:25,200 --> 00:04:32,800
which also has an amount like the 294.67,
103
00:04:32,800 --> 00:04:32,833
which also has an amount like the 294.67,
104
00:04:32,833 --> 00:04:35,266
and where we have a date
105
00:04:35,266 --> 00:04:40,566
like this new Date we created here in ExpenseItem before.
106
00:04:40,566 --> 00:04:42,033
Now, again, we don't just have one,
107
00:04:42,033 --> 00:04:46,433
but we have, let's say, three such expenses here,
108
00:04:46,433 --> 00:04:48,266
or maybe four.
109
00:04:48,266 --> 00:04:51,166
Now, to make sure we don't have to type these all by hand,
110
00:04:51,166 --> 00:04:53,466
attached you find a simple text file,
111
00:04:53,466 --> 00:04:57,166
which contains four dummy expense items,
112
00:04:57,166 --> 00:05:01,433
which you can just wrap and copy into your expenses array.
113
00:05:01,433 --> 00:05:01,700
which you can just wrap and copy into your expenses array.
114
00:05:01,700 --> 00:05:05,200
These objects also have an extra id field
115
00:05:05,200 --> 00:05:08,600
which we don't need at the moment though.
116
00:05:08,600 --> 00:05:11,833
Nonetheless, now you will have four objects
117
00:05:11,833 --> 00:05:13,833
inside of this expenses array.
118
00:05:13,833 --> 00:05:18,300
And now we want to pass the data of these different objects
119
00:05:18,300 --> 00:05:21,433
to these different ExpenseItems.
120
00:05:21,433 --> 00:05:25,566
That means we wanna make these ExpenseItems configurable
121
00:05:25,566 --> 00:05:28,566
from outside, you could say.
122
00:05:28,566 --> 00:05:28,866
from outside, you could say.
123
00:05:28,866 --> 00:05:31,400
The data should not be stored inside of them
124
00:05:31,400 --> 00:05:33,800
but instead received from outside.
125
00:05:33,800 --> 00:05:38,633
And that works with this props concept I just mentioned.
126
00:05:38,633 --> 00:05:42,666
In App.js, we can simply add attributes
127
00:05:42,666 --> 00:05:47,066
to these custom HTML elements, so to these components.
128
00:05:47,066 --> 00:05:49,933
I'm using these terms interchangeably here.
129
00:05:49,933 --> 00:05:50,233
I'm using these terms interchangeably here.
130
00:05:50,233 --> 00:05:53,733
And, for example, we could add a title attribute
131
00:05:53,733 --> 00:05:56,233
here to ExpenseItem
132
00:05:56,233 --> 00:06:02,000
and set this to a value of Toilet Paper.
133
00:06:02,000 --> 00:06:05,666
So we can just type Toilet Paper here.
134
00:06:05,666 --> 00:06:08,866
But now I wouldn't yet again be hard-coding some data
135
00:06:08,866 --> 00:06:10,866
in this JSX code.
136
00:06:10,866 --> 00:06:13,500
Since we already have this expenses array here,
137
00:06:13,500 --> 00:06:15,833
I also can dynamically retrieve
138
00:06:15,833 --> 00:06:18,833
the title stored in this first ExpenseItem
139
00:06:18,833 --> 00:06:21,833
for this first ExpenseItem here.
140
00:06:21,833 --> 00:06:22,133
for this first ExpenseItem here.
141
00:06:22,133 --> 00:06:22,933
And we can do this
142
00:06:22,933 --> 00:06:26,933
by, again, using this single-curly-brace syntax.
143
00:06:26,933 --> 00:06:27,166
by, again, using this single-curly-brace syntax.
144
00:06:27,166 --> 00:06:28,566
We cannot just use this
145
00:06:28,566 --> 00:06:31,500
between opening and closing tags of elements,
146
00:06:31,500 --> 00:06:35,500
we can also use it for assigning values to attributes.
147
00:06:35,500 --> 00:06:39,633
And here I can then access expenses, which is this array,
148
00:06:39,633 --> 00:06:39,900
And here I can then access expenses, which is this array,
149
00:06:39,900 --> 00:06:43,400
there the first item with index zero,
150
00:06:43,400 --> 00:06:47,566
and there, this first item, like all items, is an object
151
00:06:47,566 --> 00:06:50,466
which has a title property, for example.
152
00:06:50,466 --> 00:06:55,933
So we can access .title here.
153
00:06:55,933 --> 00:07:00,833
And now this title is being passed to this ExpenseItem.
154
00:07:00,833 --> 00:07:03,033
Now, we can do the same for the amount.
155
00:07:03,033 --> 00:07:06,200
We set, let's say, an amount attribute.
156
00:07:06,200 --> 00:07:08,166
And these attribute names, by the way,
157
00:07:08,166 --> 00:07:10,200
are totally up to you.
158
00:07:10,200 --> 00:07:10,366
are totally up to you.
159
00:07:10,366 --> 00:07:12,500
I'm going with title and amount here,
160
00:07:12,500 --> 00:07:14,833
but you could pick different things.
161
00:07:14,833 --> 00:07:16,466
And as a value for amount,
162
00:07:16,466 --> 00:07:19,600
I, again, access expenses and the first expense there
163
00:07:19,600 --> 00:07:22,800
and then the amount field.
164
00:07:22,800 --> 00:07:26,066
And last but not least, we can add a date attribute
165
00:07:26,066 --> 00:07:30,766
and access expenses and there the first expense .date.
166
00:07:30,766 --> 00:07:31,233
and access expenses and there the first expense .date.
167
00:07:31,233 --> 00:07:34,100
You just have to make sure that the part after the dot
168
00:07:34,100 --> 00:07:36,266
matches the property names here
169
00:07:36,266 --> 00:07:40,200
because we are accessing these objects.
170
00:07:40,200 --> 00:07:42,033
Now, I'll hit the auto-format code
171
00:07:42,033 --> 00:07:43,533
to make this easier to read
172
00:07:43,533 --> 00:07:46,466
by splitting these across multiple lines.
173
00:07:46,466 --> 00:07:46,800
by splitting these across multiple lines.
174
00:07:46,800 --> 00:07:51,200
We can now do the same for the other ExpenseItems.
175
00:07:51,200 --> 00:07:53,066
So I'll just repeat this
176
00:07:53,066 --> 00:07:59,333
but then access the, oops, the second expense here
177
00:07:59,333 --> 00:08:03,466
and the third expense with index two
178
00:08:03,466 --> 00:08:03,566
and the third expense with index two
179
00:08:03,566 --> 00:08:09,733
and the fourth expense with index three.
180
00:08:09,733 --> 00:08:13,166
Now, if we save that, we see no change, though,
181
00:08:13,166 --> 00:08:16,500
because we only did the first half
182
00:08:16,500 --> 00:08:18,366
of the work we need to do.
183
00:08:18,366 --> 00:08:21,066
We added these attributes with any names of our choice here
184
00:08:21,066 --> 00:08:23,000
We added these attributes with any names of our choice here
185
00:08:23,000 --> 00:08:25,966
because these are our custom elements,
186
00:08:25,966 --> 00:08:29,233
hence these attribute names are up to us.
187
00:08:29,233 --> 00:08:31,566
But inside of that component code,
188
00:08:31,566 --> 00:08:34,000
so inside of ExpenseItem.js,
189
00:08:34,000 --> 00:08:34,232
so inside of ExpenseItem.js,
190
00:08:34,232 --> 00:08:36,265
we also now need to do something
191
00:08:36,265 --> 00:08:39,066
with these received attribute values,
192
00:08:39,066 --> 00:08:42,000
and that's the half which is missing.
193
00:08:42,000 --> 00:08:42,265
and that's the half which is missing.
194
00:08:42,265 --> 00:08:45,666
Now, the question is how do we get access to the values
195
00:08:45,666 --> 00:08:50,533
defined in the place where we use our custom components?
196
00:08:50,533 --> 00:08:53,266
And the answer is parameters.
197
00:08:53,266 --> 00:08:56,000
I mentioned that in regular JavaScript,
198
00:08:56,000 --> 00:08:59,233
we use parameters for passing data into functions,
199
00:08:59,233 --> 00:09:02,500
and it's kind of similar for React.
200
00:09:02,500 --> 00:09:05,266
However, we're now not getting a title
201
00:09:05,266 --> 00:09:09,000
and an amount and a date parameter, as you might think,
202
00:09:09,000 --> 00:09:11,700
but, instead, we get one parameter.
203
00:09:11,700 --> 00:09:11,800
but, instead, we get one parameter.
204
00:09:11,800 --> 00:09:15,300
React will ensure that we get one parameter
205
00:09:15,300 --> 00:09:18,500
in every component which we use as a component,
206
00:09:18,500 --> 00:09:21,266
like we're doing it here for ExpenseItem.
207
00:09:21,266 --> 00:09:21,800
like we're doing it here for ExpenseItem.
208
00:09:21,800 --> 00:09:24,933
And that one parameter will be an object
209
00:09:24,933 --> 00:09:29,333
which holds all the received attributes as properties,
210
00:09:29,333 --> 00:09:33,466
hence the name props for the overall concept.
211
00:09:33,466 --> 00:09:35,500
Therefore, we get one parameter,
212
00:09:35,500 --> 00:09:38,133
and you can name this parameter whatever you want.
213
00:09:38,133 --> 00:09:41,433
It's your function. You could name it data.
214
00:09:41,433 --> 00:09:43,533
But, typically, it's named props
215
00:09:43,533 --> 00:09:46,100
to make it clear that this is this object
216
00:09:46,100 --> 00:09:49,700
which holds all the values we get
217
00:09:49,700 --> 00:09:53,666
for the attributes on our custom element.
218
00:09:53,666 --> 00:09:54,000
for the attributes on our custom element.
219
00:09:54,000 --> 00:09:55,033
And to be precise,
220
00:09:55,033 --> 00:09:59,500
we get key-value pairs in this props object here
221
00:09:59,500 --> 00:10:02,966
which is passed in by React automatically.
222
00:10:02,966 --> 00:10:06,533
The keys will be the attribute names defined here,
223
00:10:06,533 --> 00:10:09,766
so title, amount, and date in my case.
224
00:10:09,766 --> 00:10:09,900
so title, amount, and date in my case.
225
00:10:09,900 --> 00:10:14,566
And the values, of course, will be the values set here.
226
00:10:14,566 --> 00:10:18,300
So if I now wanna output the title received
227
00:10:18,300 --> 00:10:20,500
here in this h2 tag,
228
00:10:20,500 --> 00:10:26,600
I can now access props.title like this,
229
00:10:26,600 --> 00:10:29,300
getting access to this props parameter
230
00:10:29,300 --> 00:10:29,433
getting access to this props parameter
231
00:10:29,433 --> 00:10:32,033
and then there to the title property
232
00:10:32,033 --> 00:10:37,966
which will exist because we set a title attribute.
233
00:10:37,966 --> 00:10:41,566
Now, if you chose a different name than title here,
234
00:10:41,566 --> 00:10:44,300
like, for example, name,
235
00:10:44,300 --> 00:10:44,400
like, for example, name,
236
00:10:44,400 --> 00:10:47,066
if you chose that as a name, for example,
237
00:10:47,066 --> 00:10:51,333
then you have to access props.name here.
238
00:10:51,333 --> 00:10:51,700
then you have to access props.name here.
239
00:10:51,700 --> 00:10:55,866
So the key which you access on your props object
240
00:10:55,866 --> 00:11:00,033
has to be the name you picked for your attribute.
241
00:11:00,033 --> 00:11:01,600
Now, here I'll go back to title
242
00:11:01,600 --> 00:11:04,200
and therefore adjust it here in both places again,
243
00:11:04,200 --> 00:11:07,400
but you have to make sure that this matches.
244
00:11:07,400 --> 00:11:09,966
Otherwise, it will not work.
245
00:11:09,966 --> 00:11:10,666
Otherwise, it will not work.
246
00:11:10,666 --> 00:11:12,366
Now, which names you choose,
247
00:11:12,366 --> 00:11:16,366
if that's title or name or text or whatever,
248
00:11:16,366 --> 00:11:18,866
that's up to you, it's your component.
249
00:11:18,866 --> 00:11:22,400
But, of course, you typically wanna choose prop names
250
00:11:22,400 --> 00:11:24,633
and therefore attribute names
251
00:11:24,633 --> 00:11:28,666
which are self-explanatory and which makes sense.
252
00:11:28,666 --> 00:11:31,066
So since we're passing in the amount here,
253
00:11:31,066 --> 00:11:33,300
amount makes sense.
254
00:11:33,300 --> 00:11:37,200
Something like someNumber would be valid
255
00:11:37,200 --> 00:11:40,533
but wouldn't make a lot of sense, I guess,
256
00:11:40,533 --> 00:11:42,866
so I'll revert that.
257
00:11:42,866 --> 00:11:45,233
Now, therefore, in ExpenseItem,
258
00:11:45,233 --> 00:11:50,333
we can not just output props.title but also props.amount,
259
00:11:50,333 --> 00:11:50,566
we can not just output props.title but also props.amount,
260
00:11:50,566 --> 00:11:56,466
and here for the date, props.date.toISOString.
261
00:11:56,466 --> 00:11:58,000
And that means we can now get rid
262
00:11:58,000 --> 00:11:59,700
of these three constants here
263
00:11:59,700 --> 00:12:02,133
since we now get all the data we need
264
00:12:02,133 --> 00:12:05,833
from outside this component.
265
00:12:05,833 --> 00:12:09,666
We're not defining it inside of the ExpenseItem component,
266
00:12:09,666 --> 00:12:11,066
inside of this function,
267
00:12:11,066 --> 00:12:13,633
but, instead, it's in the end defined in App.js
268
00:12:13,633 --> 00:12:16,066
and passed into ExpenseItem
269
00:12:16,066 --> 00:12:21,633
for the different usages of ExpenseItem through attributes.
270
00:12:21,633 --> 00:12:24,966
And that's how you share data between React components.
271
00:12:24,966 --> 00:12:30,000
You can make your components truly reusable and configurable
272
00:12:30,000 --> 00:12:32,600
by using this props concept,
273
00:12:32,600 --> 00:12:37,600
which is one of the key concepts React has to offer.
274
00:12:37,600 --> 00:12:41,500
You'll use props all the time, so keep it in mind.
275
00:12:41,500 --> 00:12:42,733
It's super important.
276
00:12:42,733 --> 00:12:44,966
Props is a super important concept
277
00:12:44,966 --> 00:12:47,833
because it allows you to make your components reusable,
278
00:12:47,833 --> 00:12:49,900
and it allows you to pass data
279
00:12:49,900 --> 00:12:53,033
from another component to this component.
280
00:12:53,033 --> 00:12:54,600
And hence if we now have a look,
281
00:12:54,600 --> 00:12:58,066
we see these different expenses are rendered
282
00:12:58,066 --> 00:13:00,966
with different titles, different dates,
283
00:13:00,966 --> 00:13:02,500
and different amounts.
22589
Can't find what you're looking for?
Get subtitles in any language from opensubtitles.com, and translate them here.