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:05,900
So let's work on that MealItem for now
2
00:00:05,900 --> 00:00:09,710
which allows us to add items to the cart.
3
00:00:09,710 --> 00:00:13,540
For this we already added the MealItemForm.js file here
4
00:00:13,540 --> 00:00:17,180
in the MealItem folder, but of course it's empty right now.
5
00:00:17,180 --> 00:00:18,770
We will also need some styling.
6
00:00:18,770 --> 00:00:23,130
So again attach to find a MealItem.module.css file
7
00:00:23,130 --> 00:00:26,163
so that we don't have to write the styles manually here.
8
00:00:27,090 --> 00:00:30,640
Now in the MealItemForm.js file,
9
00:00:30,640 --> 00:00:31,920
we of course wanna create
10
00:00:31,920 --> 00:00:35,223
our MealItemForm component function,
11
00:00:36,100 --> 00:00:39,450
and that this will receive some props here.
12
00:00:39,450 --> 00:00:43,283
And we of course export this function here.
13
00:00:44,870 --> 00:00:48,400
Now we can also already import the style classes
14
00:00:48,400 --> 00:00:53,320
with import classes from MealItemForm.module.css
15
00:00:53,320 --> 00:00:57,763
and then start with the JSX markup for this component.
16
00:00:59,520 --> 00:01:02,140
Now here, I wanna render a form element
17
00:01:02,140 --> 00:01:05,000
and in there we wanna have an input,
18
00:01:05,000 --> 00:01:07,573
like this and we wanna have a button.
19
00:01:08,830 --> 00:01:11,513
So therefore here, we can add both.
20
00:01:12,550 --> 00:01:16,360
Now for this input, I will actually wrap that
21
00:01:16,360 --> 00:01:21,360
into a separate component, so that we have a reusable input
22
00:01:21,770 --> 00:01:25,263
which we could use in other parts of an application as well.
23
00:01:26,150 --> 00:01:27,790
I'll do this as a second step though.
24
00:01:27,790 --> 00:01:31,710
As a first step, let's finish the button.
25
00:01:31,710 --> 00:01:34,540
For that I'll simply say Add on it
26
00:01:34,540 --> 00:01:36,620
because that button will add it to the cart.
27
00:01:36,620 --> 00:01:39,313
Maybe add a plus in front of Add as well.
28
00:01:40,350 --> 00:01:44,030
And of course, add a class on the overall form
29
00:01:44,030 --> 00:01:47,633
with class name and set this equal to classes.form,
30
00:01:48,500 --> 00:01:49,333
like this.
31
00:01:51,200 --> 00:01:54,570
Now we can go to the MealItem.js file
32
00:01:54,570 --> 00:01:56,330
and import
33
00:01:56,330 --> 00:01:57,610
that MealItemForm
34
00:01:58,970 --> 00:02:00,481
component.
35
00:02:00,481 --> 00:02:01,314
MealItemForm
36
00:02:02,890 --> 00:02:05,893
from MealItemForm like this,
37
00:02:07,400 --> 00:02:08,872
and output it here,
38
00:02:11,170 --> 00:02:12,163
between the div.
39
00:02:14,150 --> 00:02:16,180
Now, if we save this, we have something like this
40
00:02:16,180 --> 00:02:20,223
which is not the final look but which is a start.
41
00:02:22,270 --> 00:02:24,650
Now for the final look, as I said,
42
00:02:24,650 --> 00:02:26,610
I wanna extract that input
43
00:02:26,610 --> 00:02:30,450
into a reusable pre-styled input component
44
00:02:30,450 --> 00:02:34,460
which could be used in multiple parts of the application.
45
00:02:34,460 --> 00:02:36,590
Again, just as with the card
46
00:02:36,590 --> 00:02:38,280
and a lot of these examples here,
47
00:02:38,280 --> 00:02:42,330
not because this here would be a super huge application
48
00:02:42,330 --> 00:02:45,630
but because these are realistic scenarios
49
00:02:45,630 --> 00:02:48,360
in bigger applications you might be working on,
50
00:02:48,360 --> 00:02:49,771
that you wanna have these
51
00:02:49,771 --> 00:02:54,760
reusable pre-styled utility components like inputs,
52
00:02:54,760 --> 00:02:56,960
or maybe all the buttons and so on,
53
00:02:56,960 --> 00:02:59,870
which you use in a lot of different places
54
00:02:59,870 --> 00:03:00,943
of your application.
55
00:03:01,860 --> 00:03:03,780
And therefore in the UI folder
56
00:03:03,780 --> 00:03:06,700
I will add a Input.js file
57
00:03:06,700 --> 00:03:10,000
which will be responsible for rendering that input.
58
00:03:10,000 --> 00:03:11,330
And therefore attached to all
59
00:03:11,330 --> 00:03:14,580
to find the Input.module.css file
60
00:03:14,580 --> 00:03:16,953
with styling for that input.
61
00:03:18,500 --> 00:03:21,100
Now in there, I will, of course again
62
00:03:21,100 --> 00:03:22,730
create my
63
00:03:22,730 --> 00:03:26,910
component function as we did it multiple times already.
64
00:03:26,910 --> 00:03:29,680
And of course we'll import these classes.
65
00:03:29,680 --> 00:03:34,103
Import classes from Input.module.css.
66
00:03:35,280 --> 00:03:39,840
And then here, we can return the markup for this input.
67
00:03:39,840 --> 00:03:42,160
And in this case I wanna have a div here
68
00:03:42,160 --> 00:03:46,960
with a class name of classes.input for the styling
69
00:03:46,960 --> 00:03:49,740
and then there a label
70
00:03:49,740 --> 00:03:53,453
with some text for the input and then the input itself.
71
00:03:54,930 --> 00:03:56,730
Now you could definitely write this
72
00:03:56,730 --> 00:03:58,390
in a lot of different ways.
73
00:03:58,390 --> 00:04:02,440
Maybe even letting the user of this component decide
74
00:04:02,440 --> 00:04:07,320
whether you want the input or a select or a text area here.
75
00:04:07,320 --> 00:04:09,350
But to keep things simple here,
76
00:04:09,350 --> 00:04:11,383
we'll just always render a input.
77
00:04:12,400 --> 00:04:15,510
Now, of course the label text should be configurable
78
00:04:15,510 --> 00:04:19,570
and therefore the text output here is props.label,
79
00:04:19,570 --> 00:04:21,810
though of course, it's totally up to you
80
00:04:21,810 --> 00:04:24,963
which prop name you're expecting this name on.
81
00:04:26,840 --> 00:04:30,610
I will also set the htmlFor prop here
82
00:04:30,610 --> 00:04:34,310
to set the for attribute, like class.
83
00:04:34,310 --> 00:04:37,070
You don't set class or for
84
00:04:37,070 --> 00:04:40,170
but in the case of class it's class name in JSX,
85
00:04:40,170 --> 00:04:43,290
in the case of for, it's htmlFor
86
00:04:43,290 --> 00:04:47,280
because both class and for are reserved keywords
87
00:04:47,280 --> 00:04:48,373
in JavaScript.
88
00:04:49,510 --> 00:04:52,120
And here, I will then point at props
89
00:04:52,120 --> 00:04:54,483
and then input.id.
90
00:04:55,440 --> 00:04:57,270
Again, this is my component
91
00:04:57,270 --> 00:05:00,720
so I can decide which kind of prompts I expect
92
00:05:00,720 --> 00:05:03,650
and which structure these props should have.
93
00:05:03,650 --> 00:05:08,010
And I simply expect here that for this input component,
94
00:05:08,010 --> 00:05:09,480
when it's getting used,
95
00:05:09,480 --> 00:05:14,130
I get a label prop with the label text and input prop,
96
00:05:14,130 --> 00:05:18,463
which then itself holds an object with configuration data
97
00:05:18,463 --> 00:05:22,120
for the input, like for example, the id,
98
00:05:22,120 --> 00:05:25,220
which we therefore then also add as the id prop here
99
00:05:25,220 --> 00:05:26,330
on the input.
100
00:05:26,330 --> 00:05:28,543
So props.input.id.
101
00:05:29,390 --> 00:05:33,500
In addition, I will now use a nice little trick
102
00:05:33,500 --> 00:05:37,040
to pass all other configuration data
103
00:05:37,040 --> 00:05:39,220
I might've gotten for this input
104
00:05:39,220 --> 00:05:42,820
to this input element here as props.
105
00:05:42,820 --> 00:05:45,320
I add curly braces here, just like this,
106
00:05:45,320 --> 00:05:49,733
and then use the spread operator to spread props.input.
107
00:05:51,200 --> 00:05:54,990
This ensures that all the key value pairs
108
00:05:54,990 --> 00:05:56,920
in this input object,
109
00:05:56,920 --> 00:06:01,920
which we receive on props input are added as props to input.
110
00:06:03,350 --> 00:06:05,810
So if input object here is an object
111
00:06:05,810 --> 00:06:07,830
that for example has
112
00:06:07,830 --> 00:06:09,140
type
113
00:06:09,140 --> 00:06:10,440
text.
114
00:06:10,440 --> 00:06:13,930
So if that is what we get on props input, for example,
115
00:06:13,930 --> 00:06:16,640
then this code here would make sure
116
00:06:16,640 --> 00:06:19,253
that type equals text is being added.
117
00:06:20,340 --> 00:06:21,910
This is how that works
118
00:06:21,910 --> 00:06:26,560
when you use the spread operator on an element like this.
119
00:06:26,560 --> 00:06:28,080
It's simply a convenient way
120
00:06:28,080 --> 00:06:30,580
of making this input highly configurable
121
00:06:30,580 --> 00:06:35,580
from outside this component, through this input prop here.
122
00:06:36,680 --> 00:06:39,450
And of course, therefore we can even get rid of this id
123
00:06:39,450 --> 00:06:42,550
if we want to, and simply expect that this id
124
00:06:42,550 --> 00:06:44,850
is part of this input prop as well,
125
00:06:44,850 --> 00:06:46,910
which we already do expect here.
126
00:06:46,910 --> 00:06:49,600
And then therefore also added automatically
127
00:06:49,600 --> 00:06:53,883
through this syntax as a prop to this input element.
128
00:06:55,800 --> 00:06:59,940
Now, and with that added, we can of course go back to the
129
00:07:00,831 --> 00:07:03,170
MealItemForm component
130
00:07:04,170 --> 00:07:06,180
and there import
131
00:07:06,180 --> 00:07:08,900
Input from going up,
132
00:07:08,900 --> 00:07:09,733
going up,
133
00:07:09,733 --> 00:07:12,350
UI/input
134
00:07:15,510 --> 00:07:17,910
and then replacing this input here
135
00:07:17,910 --> 00:07:21,450
with input as a self-closing tag.
136
00:07:21,450 --> 00:07:23,880
And there I will now add the label prop
137
00:07:24,980 --> 00:07:27,070
because I'm expecting a label prop here
138
00:07:27,070 --> 00:07:28,863
with some text inside of it,
139
00:07:29,860 --> 00:07:31,590
with a label off amount.
140
00:07:31,590 --> 00:07:33,640
And then the input prop,
141
00:07:33,640 --> 00:07:36,960
which now itself should hold an object.
142
00:07:36,960 --> 00:07:40,290
So here, the value is an object like this
143
00:07:40,290 --> 00:07:43,760
hence the double curly braces, it's no special syntax.
144
00:07:43,760 --> 00:07:46,380
Instead we have one pair of curly braces
145
00:07:46,380 --> 00:07:49,970
to evaluate a JavaScript expression
146
00:07:49,970 --> 00:07:51,930
which is passed in as a value.
147
00:07:51,930 --> 00:07:53,880
And then that expression just happens
148
00:07:53,880 --> 00:07:55,790
to be a JavaScript object.
149
00:07:55,790 --> 00:07:59,520
Hence, we have that other pair of curly braces.
150
00:07:59,520 --> 00:08:01,550
And in that object, I wanna have an id,
151
00:08:01,550 --> 00:08:02,983
which is amount let's say,
152
00:08:03,970 --> 00:08:06,180
type which is number
153
00:08:06,180 --> 00:08:09,603
and this is one of the built-in input element types.
154
00:08:10,700 --> 00:08:14,030
And I'll add some validation props as well
155
00:08:14,030 --> 00:08:15,920
which are all props you can add
156
00:08:15,920 --> 00:08:18,390
by default to the input element.
157
00:08:18,390 --> 00:08:21,200
And that would be the min prop with one
158
00:08:21,200 --> 00:08:23,510
and the max prop with five
159
00:08:23,510 --> 00:08:25,850
to make sure that the amount that can be added
160
00:08:25,850 --> 00:08:29,203
has to be at least one but is not bigger than five.
161
00:08:30,170 --> 00:08:31,570
I'll add the step prop
162
00:08:31,570 --> 00:08:34,720
which is also supported on the input element
163
00:08:34,720 --> 00:08:36,000
and set this to one
164
00:08:37,280 --> 00:08:40,669
and also provide a default value of one
165
00:08:40,669 --> 00:08:42,450
so that this is the initial value
166
00:08:42,450 --> 00:08:45,080
with which this input is populated.
167
00:08:45,080 --> 00:08:48,640
And again, these are all default props
168
00:08:48,640 --> 00:08:52,110
which you can add to any input element.
169
00:08:52,110 --> 00:08:53,280
So these are not props
170
00:08:53,280 --> 00:08:55,770
which we need to interpret and handle,
171
00:08:55,770 --> 00:08:58,960
instead we just distribute them onto the input
172
00:08:58,960 --> 00:09:00,220
through this syntax
173
00:09:00,220 --> 00:09:03,470
and then they automatically start making sense
174
00:09:03,470 --> 00:09:06,943
because these are all built-in props for input elements.
175
00:09:08,400 --> 00:09:11,630
And if we now save that, this is what we got.
176
00:09:11,630 --> 00:09:14,963
And that looks, of course, very, very nice.
177
00:09:16,840 --> 00:09:20,630
Now with that, we built a lot of components
178
00:09:20,630 --> 00:09:24,170
and we still got the cards components to build
179
00:09:24,170 --> 00:09:25,430
but they're after.
180
00:09:25,430 --> 00:09:30,280
We are finally ready to also start working on
181
00:09:30,280 --> 00:09:34,120
the logic of this application and to add context,
182
00:09:34,120 --> 00:09:36,560
to manage the card for example,
183
00:09:36,560 --> 00:09:39,160
but of course building all these components
184
00:09:39,160 --> 00:09:42,900
that is the meat of basically any React application
185
00:09:42,900 --> 00:09:44,300
you are going to build.
186
00:09:44,300 --> 00:09:45,640
And therefore I'm walking
187
00:09:45,640 --> 00:09:47,930
through that process again with you
188
00:09:47,930 --> 00:09:51,040
because you need to know how you can build components,
189
00:09:51,040 --> 00:09:52,590
how you can use components.
190
00:09:52,590 --> 00:09:56,970
That is super crucial and therefore an important practice.
191
00:09:56,970 --> 00:10:00,030
And with that, let's build that card modal
192
00:10:00,030 --> 00:10:03,870
and there after, let's finally wire everything up
193
00:10:03,870 --> 00:10:06,653
and add more logic to this application.
14811
Can't find what you're looking for?
Get subtitles in any language from opensubtitles.com, and translate them here.