Would you like to inspect the original subtitles? These are the user uploaded subtitles that are being translated:
1
00:00:02,240 --> 00:00:04,780
So let's make sure we only show the error modal
2
00:00:04,780 --> 00:00:07,410
if we entered something invalid.
3
00:00:07,410 --> 00:00:10,450
So in the AddUser component, currently,
4
00:00:10,450 --> 00:00:13,470
if we have an empty input or an invalid age,
5
00:00:13,470 --> 00:00:15,510
we just return.
6
00:00:15,510 --> 00:00:17,683
We cancel this function execution.
7
00:00:18,950 --> 00:00:20,700
I wanna continue doing that,
8
00:00:20,700 --> 00:00:23,180
but in addition I also wanna show an error message
9
00:00:23,180 --> 00:00:24,410
in the future.
10
00:00:24,410 --> 00:00:25,660
And therefore, we need a way
11
00:00:25,660 --> 00:00:29,703
of dynamically showing and hiding this error modal.
12
00:00:30,700 --> 00:00:33,880
Put in other words, we need to update our UI
13
00:00:33,880 --> 00:00:36,410
conditionally, based on the question,
14
00:00:36,410 --> 00:00:38,403
if we have an error or not.
15
00:00:39,340 --> 00:00:41,960
And what does this scream for?
16
00:00:41,960 --> 00:00:43,030
State management.
17
00:00:43,030 --> 00:00:46,200
We need to manage some error state
18
00:00:46,200 --> 00:00:48,710
and that could be a string like the error message
19
00:00:48,710 --> 00:00:50,920
that could be an object which bundles error
20
00:00:50,920 --> 00:00:52,920
or title message, whatever you want,
21
00:00:52,920 --> 00:00:55,950
but we need to manage such an error state
22
00:00:55,950 --> 00:00:59,270
so that we can set it to, we have an error,
23
00:00:59,270 --> 00:01:01,510
in which case we wanna render the modal
24
00:01:01,510 --> 00:01:04,250
and so that we can set it to, we got no error,
25
00:01:04,250 --> 00:01:06,840
in which case we render nothing.
26
00:01:06,840 --> 00:01:08,480
I mean, we still rendered a form
27
00:01:08,480 --> 00:01:10,793
but we wouldn't render the modal in that case.
28
00:01:11,770 --> 00:01:14,913
So we need an extra piece of state here, useState
29
00:01:16,700 --> 00:01:19,300
and the initial value is actually undefined,
30
00:01:19,300 --> 00:01:22,410
so I don't need to pass any other initial value here
31
00:01:22,410 --> 00:01:24,480
between the parentheses.
32
00:01:24,480 --> 00:01:27,690
Now I'll name that error and setError
33
00:01:29,010 --> 00:01:30,570
because in the end I'm going to manage
34
00:01:30,570 --> 00:01:32,293
some error information here.
35
00:01:33,230 --> 00:01:35,260
And now again, it's your app, it's up to you
36
00:01:35,260 --> 00:01:38,230
how an error should look like for you.
37
00:01:38,230 --> 00:01:40,830
If it's just a string or if it's an object,
38
00:01:40,830 --> 00:01:43,480
I will manage an error as an object here.
39
00:01:43,480 --> 00:01:48,480
So here in that first validation part, I will call set error
40
00:01:49,160 --> 00:01:52,490
and set this to an object where I wanna have a title
41
00:01:52,490 --> 00:01:57,280
like invalid input and a message
42
00:01:57,280 --> 00:02:02,280
where I say, please enter a valid name and age
43
00:02:02,530 --> 00:02:05,763
non-empty values, something like this.
44
00:02:07,080 --> 00:02:09,053
And this will set the error state.
45
00:02:10,259 --> 00:02:12,240
Now I'll do the exact same here
46
00:02:12,240 --> 00:02:14,670
in the second validation function.
47
00:02:14,670 --> 00:02:17,130
I'll change the title to invalid age
48
00:02:17,130 --> 00:02:20,370
because here we know that the age is the missing piece
49
00:02:20,370 --> 00:02:22,350
and that the age is invalid
50
00:02:22,350 --> 00:02:25,160
and I'll have a different message as well.
51
00:02:25,160 --> 00:02:27,300
I'll have a message that says,
52
00:02:27,300 --> 00:02:32,010
please enter a valid age greater zero,
53
00:02:32,010 --> 00:02:33,913
so that's my error message here.
54
00:02:35,350 --> 00:02:38,250
So we set our error state in both cases,
55
00:02:38,250 --> 00:02:40,750
but we set it to a slightly different object
56
00:02:40,750 --> 00:02:42,830
in both scenarios.
57
00:02:42,830 --> 00:02:45,000
The object always has the same properties
58
00:02:45,000 --> 00:02:48,290
and that is important so that we can reliably use it
59
00:02:48,290 --> 00:02:50,653
but the properties hold different values.
60
00:02:52,050 --> 00:02:54,620
Now with that, that error state snapshot
61
00:02:54,620 --> 00:02:58,660
will hold that error, whenever we call setError,
62
00:02:58,660 --> 00:03:01,060
because then the entire component will rerender
63
00:03:01,060 --> 00:03:04,100
and error will hold the latest error object
64
00:03:04,100 --> 00:03:05,523
as a state snapshot.
65
00:03:06,680 --> 00:03:10,000
Hence, we can use that down there in our JSX code
66
00:03:10,000 --> 00:03:12,523
to conditionally render the error modal.
67
00:03:13,630 --> 00:03:17,330
We just need to check if error is a thing,
68
00:03:17,330 --> 00:03:22,053
and if it is, with that AND operator, we output error model.
69
00:03:23,227 --> 00:03:26,700
Otherwise, if error would be undefined,
70
00:03:26,700 --> 00:03:29,860
well nothing would be rendered here for this line.
71
00:03:29,860 --> 00:03:33,623
And that is how we can conditionally render a JSX element.
72
00:03:36,000 --> 00:03:38,650
We need wrapping curly braces around this
73
00:03:38,650 --> 00:03:41,700
because this generally is a JavaScript expression,
74
00:03:41,700 --> 00:03:45,263
just one, which then also holds a JSX element again.
75
00:03:46,920 --> 00:03:49,730
So now the error modal will only be output
76
00:03:49,730 --> 00:03:51,130
if we have an error.
77
00:03:51,130 --> 00:03:54,610
And now since the error also is a more complex object
78
00:03:54,610 --> 00:03:56,350
with a title and a message,
79
00:03:56,350 --> 00:03:58,600
we can utilize that title and message
80
00:03:58,600 --> 00:04:02,703
to output it as the actual title and message in our modal.
81
00:04:03,830 --> 00:04:08,830
So here I'll bind title to error.title and message,
82
00:04:10,330 --> 00:04:15,330
of course, unsurprisingly to error.message.
83
00:04:16,910 --> 00:04:20,410
And with that if we save this, we get nothing here
84
00:04:20,410 --> 00:04:22,660
but if I submit an empty form,
85
00:04:22,660 --> 00:04:24,143
you see here is my modal.
86
00:04:25,040 --> 00:04:27,610
Right now, we have no way of dismissing it,
87
00:04:27,610 --> 00:04:29,940
the button doesn't work yet, but we can of course
88
00:04:29,940 --> 00:04:32,930
reload the page for now so that I also show you
89
00:04:32,930 --> 00:04:34,770
the invalid age case.
90
00:04:34,770 --> 00:04:39,160
If I entered this, you see I get the invalid age error.
91
00:04:39,160 --> 00:04:40,620
So that is working.
92
00:04:40,620 --> 00:04:42,950
That works exactly in the way it should.
93
00:04:42,950 --> 00:04:45,670
Now let's make sure we can also dismiss it
94
00:04:45,670 --> 00:04:48,210
by either clicking on the backdrop
95
00:04:48,210 --> 00:04:50,313
or by clicking on the Okay button.
96
00:04:51,970 --> 00:04:54,070
Now for that, what we need to do of course,
97
00:04:54,070 --> 00:04:59,070
is we need to clear our error state, this error state,
98
00:04:59,640 --> 00:05:01,750
because if we have an error,
99
00:05:01,750 --> 00:05:05,430
if what's stored in this state snapshot is truthy,
100
00:05:05,430 --> 00:05:07,650
which a JavaScript object is,
101
00:05:07,650 --> 00:05:09,890
we'll render the error modal.
102
00:05:09,890 --> 00:05:13,080
So the only way of getting rid of that modal,
103
00:05:13,080 --> 00:05:16,400
is to reset error to undefined or to null
104
00:05:16,400 --> 00:05:19,560
or to any other falsy value
105
00:05:19,560 --> 00:05:22,183
so that this condition is no longer met.
106
00:05:23,600 --> 00:05:26,630
Now to achieve this, I'll add a new function here,
107
00:05:26,630 --> 00:05:28,713
my error handler,
108
00:05:30,710 --> 00:05:33,210
which gets no argument,
109
00:05:33,210 --> 00:05:37,423
where I simply call setError and setError to null,
110
00:05:38,660 --> 00:05:41,730
to set it from an object to null.
111
00:05:41,730 --> 00:05:44,330
Null is treated as a falsy value,
112
00:05:44,330 --> 00:05:46,523
so now this would no longer be rendered.
113
00:05:48,220 --> 00:05:49,210
Now the only question
114
00:05:49,210 --> 00:05:52,830
is how do we trigger this errorHandler function?
115
00:05:52,830 --> 00:05:56,460
Well, I would say, from inside the ErrorModal
116
00:05:56,460 --> 00:05:58,140
because inside of the ErrorModal,
117
00:05:58,140 --> 00:06:01,430
we got this button and we got the backdrop
118
00:06:01,430 --> 00:06:04,460
and on both we wanna register clicks
119
00:06:04,460 --> 00:06:07,303
and, well, trigger that error handling function.
120
00:06:08,620 --> 00:06:11,410
So on the div here, which renders the backdrop,
121
00:06:11,410 --> 00:06:13,940
I'll add a onClick prop which is available
122
00:06:13,940 --> 00:06:17,740
on every default HTML component React offers
123
00:06:17,740 --> 00:06:22,740
and trigger the props onConfirm function let's say.
124
00:06:24,370 --> 00:06:25,960
Again, it's your component,
125
00:06:25,960 --> 00:06:27,820
you can name this prop whatever you want.
126
00:06:27,820 --> 00:06:30,380
You can name it onHandleError
127
00:06:30,380 --> 00:06:33,980
or as I do it, onConfirm, whatever you want.
128
00:06:33,980 --> 00:06:36,920
The same for this button, I'll add onClick here,
129
00:06:36,920 --> 00:06:39,090
and we can add onClick here
130
00:06:39,090 --> 00:06:40,860
because our custom button component
131
00:06:40,860 --> 00:06:45,360
which we're using, forwards whatever we pass to onClick
132
00:06:45,360 --> 00:06:49,250
to the native onClick prop hence we can add it here.
133
00:06:49,250 --> 00:06:53,340
And here I also wanna trigger props onConfirm.
134
00:06:53,340 --> 00:06:55,830
And when I say trigger, I of course mean that,
135
00:06:55,830 --> 00:06:58,790
on the onConfirm prop, we also expect
136
00:06:58,790 --> 00:07:00,720
to get a function which we in the end
137
00:07:00,720 --> 00:07:03,130
just forward to the onClick prop
138
00:07:03,130 --> 00:07:05,960
and somewhere down in that component tree,
139
00:07:05,960 --> 00:07:09,690
somewhere this will then be bound to the actual DOM element
140
00:07:09,690 --> 00:07:12,720
and a click will trigger the function received
141
00:07:12,720 --> 00:07:14,663
on the onConfirm prop.
142
00:07:16,180 --> 00:07:18,930
So, where do we get that function?
143
00:07:18,930 --> 00:07:21,960
Well in the place where we use error modal.
144
00:07:21,960 --> 00:07:25,387
In the AddUser component, we use error modal,
145
00:07:25,387 --> 00:07:29,890
so here we now need to add this new onConfirm prop
146
00:07:29,890 --> 00:07:33,223
which I just worked with inside of the error modal.
147
00:07:34,090 --> 00:07:36,680
And then here, I want to pass in a pointer
148
00:07:36,680 --> 00:07:40,150
at the error handler function we defined
149
00:07:40,150 --> 00:07:43,780
so that this is the function which is ultimately triggered
150
00:07:43,780 --> 00:07:45,400
when we click on the backdrop
151
00:07:45,400 --> 00:07:47,780
or when we click on the button.
152
00:07:47,780 --> 00:07:52,010
And with all of that, if we save this, we'd go back,
153
00:07:52,010 --> 00:07:54,610
I can now click here, get my modal,
154
00:07:54,610 --> 00:07:58,300
click somewhere on the backdrop and it disappears.
155
00:07:58,300 --> 00:08:01,160
Click on the Okay button, it disappears.
156
00:08:01,160 --> 00:08:04,180
Let's try a valid input that works.
157
00:08:04,180 --> 00:08:06,320
Let's try an invalid input,
158
00:08:06,320 --> 00:08:08,060
we get the modal, we can dismiss it
159
00:08:08,060 --> 00:08:11,930
and of course fix our mistake and that all works.
160
00:08:11,930 --> 00:08:14,533
And that's the finished first app.
161
00:08:15,520 --> 00:08:19,730
Now the app itself is nice, but of course not overly complex
162
00:08:19,730 --> 00:08:21,490
as I already mentioned.
163
00:08:21,490 --> 00:08:24,890
But we used all those core features and building blocks
164
00:08:24,890 --> 00:08:27,190
that are important for React.
165
00:08:27,190 --> 00:08:31,970
Components, props, state with the use State Hook,
166
00:08:31,970 --> 00:08:35,090
lifting state up and all of these things.
167
00:08:35,090 --> 00:08:36,840
We used styling.
168
00:08:36,840 --> 00:08:39,770
We passed functions between the different components.
169
00:08:39,770 --> 00:08:42,909
So all these core patterns and concepts
170
00:08:42,909 --> 00:08:46,240
which you basically need for every React application
171
00:08:46,240 --> 00:08:49,120
you're going to build, we have them all in here.
172
00:08:49,120 --> 00:08:52,410
And that's why this hopefully, was a great practice
173
00:08:52,410 --> 00:08:55,103
and why we're now well-prepared to continue.
13703
Can't find what you're looking for?
Get subtitles in any language from opensubtitles.com, and translate them here.