Would you like to inspect the original subtitles? These are the user uploaded subtitles that are being translated:
1
00:00:02,040 --> 00:00:03,469
In order to change
2
00:00:03,469 --> 00:00:04,870
what's visible on the screen,
3
00:00:04,870 --> 00:00:08,140
we need to change the state of this app,
4
00:00:08,140 --> 00:00:09,540
so to say.
5
00:00:09,540 --> 00:00:12,450
Now, attached you find an extra article and video
6
00:00:12,450 --> 00:00:13,360
which I created
7
00:00:13,360 --> 00:00:16,170
where I explain what state is.
8
00:00:16,170 --> 00:00:18,529
In the end, you can take it quite literally though.
9
00:00:18,529 --> 00:00:20,860
The current state of this application
10
00:00:20,860 --> 00:00:25,860
is that we have free Todos and this overlay is open.
11
00:00:26,530 --> 00:00:29,160
Now, we would like to also be able to present
12
00:00:29,160 --> 00:00:33,200
another state, where this overlay is closed.
13
00:00:33,200 --> 00:00:35,700
And we want to switch between the states.
14
00:00:35,700 --> 00:00:38,390
When we click on delete, then it should open.
15
00:00:38,390 --> 00:00:39,810
And when we click on cancel
16
00:00:39,810 --> 00:00:41,710
or confirm or the backdrop,
17
00:00:41,710 --> 00:00:43,250
it should close.
18
00:00:43,250 --> 00:00:46,630
So that should be our ways of switching between the states
19
00:00:46,630 --> 00:00:49,990
and React has a built in concept that helps us with that.
20
00:00:49,990 --> 00:00:53,280
And conveniently, it's called State.
21
00:00:53,280 --> 00:00:57,170
For this, let's go to our Todo.js file,
22
00:00:57,170 --> 00:00:58,640
to our Todo component.
23
00:00:58,640 --> 00:01:00,500
Here, we got this delete handler,
24
00:01:00,500 --> 00:01:02,030
this function which is triggered
25
00:01:02,030 --> 00:01:04,150
when the delete button is clicked.
26
00:01:04,150 --> 00:01:07,160
When it is clicked, we would like to switch to the state
27
00:01:07,160 --> 00:01:09,190
where the modal is open.
28
00:01:09,190 --> 00:01:12,676
To make that happen, we need to import some functionality
29
00:01:12,676 --> 00:01:15,890
from the React library.
30
00:01:15,890 --> 00:01:17,980
So we import from React.
31
00:01:17,980 --> 00:01:18,970
Import here.
32
00:01:18,970 --> 00:01:20,680
We have no dot slash
33
00:01:20,680 --> 00:01:23,180
because React is a third party library.
34
00:01:23,180 --> 00:01:27,253
You import from those by just referencing the library name.
35
00:01:28,100 --> 00:01:31,000
And then we import something like this
36
00:01:31,000 --> 00:01:32,560
with curly braces.
37
00:01:32,560 --> 00:01:36,060
We import the useState function.
38
00:01:36,060 --> 00:01:39,770
That is a function exposed by the React library
39
00:01:39,770 --> 00:01:42,683
which we can use in our component functions.
40
00:01:43,520 --> 00:01:48,090
With useState, we register different States,
41
00:01:48,090 --> 00:01:51,290
which we want to support in our React application
42
00:01:51,290 --> 00:01:54,406
and React will react to changes in that state
43
00:01:54,406 --> 00:01:58,686
and allow us as a developer to render different output
44
00:01:58,686 --> 00:02:01,600
depending on which State is active.
45
00:02:01,600 --> 00:02:04,720
Now, that all starts with calling useState
46
00:02:04,720 --> 00:02:08,210
directly in our component function like this.
47
00:02:08,210 --> 00:02:10,350
So not inside of delete handler
48
00:02:10,350 --> 00:02:12,753
instead, directly in the component function.
49
00:02:13,669 --> 00:02:16,900
UseState is a so-called React hook
50
00:02:16,900 --> 00:02:20,760
and those React hooks can only be called directly
51
00:02:20,760 --> 00:02:24,307
in React component functions and in custom hooks
52
00:02:24,307 --> 00:02:27,320
which is a topic will not discuss in this course
53
00:02:27,320 --> 00:02:31,300
but which is discussed in depth in my complete guide as well
54
00:02:31,300 --> 00:02:33,210
For the moment it's enough that we know
55
00:02:33,210 --> 00:02:38,060
that we can use React Hooks in React component functions.
56
00:02:38,060 --> 00:02:41,700
Now, calling useState creates a state React
57
00:02:41,700 --> 00:02:42,870
as a wear ofF.
58
00:02:42,870 --> 00:02:45,770
Now, we can give this state a starting value
59
00:02:45,770 --> 00:02:48,616
by passing it here as an argument to useState.
60
00:02:48,616 --> 00:02:52,230
And that could be false if our state is
61
00:02:52,230 --> 00:02:55,696
that we want to control whether the modal is open or not
62
00:02:55,696 --> 00:02:58,240
and initially, it should not be open.
63
00:02:58,240 --> 00:03:00,540
So the initial state is false.
64
00:03:00,540 --> 00:03:05,020
Now, useState always returns an array
65
00:03:05,020 --> 00:03:07,660
with exactly two elements.
66
00:03:07,660 --> 00:03:09,170
That's how useState works.
67
00:03:09,170 --> 00:03:12,560
It always returns an array with two elements
68
00:03:12,560 --> 00:03:15,550
and we can store it as returned array in a constant
69
00:03:15,550 --> 00:03:18,370
or we use array de-structuring
70
00:03:18,370 --> 00:03:22,610
which is a JavaScript feature to store these two elements,
71
00:03:22,610 --> 00:03:25,650
since we know that it will be always two elements,
72
00:03:25,650 --> 00:03:27,505
indifferent constants
73
00:03:27,505 --> 00:03:31,793
and we could give to first constant a name of showModal
74
00:03:32,760 --> 00:03:35,906
or modalIsOpen open or anything like this.
75
00:03:35,906 --> 00:03:39,880
And the second element here,
76
00:03:39,880 --> 00:03:41,280
the second constant
77
00:03:41,280 --> 00:03:42,530
a name of setModalIsOpen.
78
00:03:44,390 --> 00:03:46,620
Now, why did I choose these names?
79
00:03:46,620 --> 00:03:48,940
Because the first element,
80
00:03:48,940 --> 00:03:51,299
which useState returns in its array
81
00:03:51,299 --> 00:03:54,290
is the current state snapshot.
82
00:03:54,290 --> 00:03:58,040
So this value, which is stored in this state.
83
00:03:58,040 --> 00:04:01,000
You can think of React state as a variable
84
00:04:01,000 --> 00:04:03,900
which is managed for you by React.
85
00:04:03,900 --> 00:04:06,010
You define the initial value here
86
00:04:06,010 --> 00:04:08,980
and you will then also be able to change that value.
87
00:04:08,980 --> 00:04:11,370
Now, you get access to the currently stored value
88
00:04:11,370 --> 00:04:14,070
for this first element here.
89
00:04:14,070 --> 00:04:15,330
The second element
90
00:04:15,330 --> 00:04:18,920
is a function that allows you to change that value
91
00:04:18,920 --> 00:04:20,209
because you don't change it
92
00:04:20,209 --> 00:04:23,120
by assigning a new value to modalIsOpen
93
00:04:23,120 --> 00:04:26,330
instead, you always call this second function
94
00:04:26,330 --> 00:04:28,900
to assign a new value.
95
00:04:28,900 --> 00:04:30,280
Why does this matter?
96
00:04:30,280 --> 00:04:33,501
Because whenever you call this state changing function
97
00:04:33,501 --> 00:04:37,100
React will in the end re-execute
98
00:04:37,100 --> 00:04:40,640
the component function to which this state belongs
99
00:04:40,640 --> 00:04:42,740
and re-evaluate it,
100
00:04:42,740 --> 00:04:45,970
and also update what's rendered on the screen.
101
00:04:45,970 --> 00:04:49,520
This allows you to pick up the latest state value
102
00:04:49,520 --> 00:04:51,760
and possibly render something different
103
00:04:51,760 --> 00:04:53,900
depending on the state.
104
00:04:53,900 --> 00:04:56,210
Notice it might still be a bit abstract.
105
00:04:56,210 --> 00:04:59,370
It will become crystal clear in a couple of seconds.
106
00:04:59,370 --> 00:05:02,460
What we can do now with these two elements
107
00:05:02,460 --> 00:05:03,989
is that in delete handler,
108
00:05:03,989 --> 00:05:07,940
we call setModalIsOpen and set is to true.
109
00:05:07,940 --> 00:05:11,130
To change that modalIsOpen state from false,
110
00:05:11,130 --> 00:05:13,848
which is our initial state, to true.
111
00:05:13,848 --> 00:05:16,034
And then we use modalIsOpen
112
00:05:16,034 --> 00:05:19,570
to conditionally render the modal and backdrop
113
00:05:19,570 --> 00:05:21,673
down there in this JSX code.
114
00:05:22,680 --> 00:05:27,010
So I go to App.js and I remove modal and backdrop from there
115
00:05:27,010 --> 00:05:28,730
and remove the imports
116
00:05:28,730 --> 00:05:31,230
since we're not using modal and backdrop
117
00:05:31,230 --> 00:05:32,913
in this file anymore.
118
00:05:33,810 --> 00:05:36,140
And instead I'll go to Todo.js
119
00:05:36,140 --> 00:05:40,469
and import modal there from ./Modal
120
00:05:40,469 --> 00:05:44,969
and import backdrop here from ./Backdrop.
121
00:05:44,969 --> 00:05:48,610
Constructing the relative paths to these files
122
00:05:48,610 --> 00:05:52,200
as seen from inside this Todo.js file.
123
00:05:52,200 --> 00:05:55,500
And since modal and backdrop are neighbors to this file,
124
00:05:55,500 --> 00:05:57,280
the paths look just like this
125
00:05:58,120 --> 00:06:00,330
and then we can use these components down here.
126
00:06:00,330 --> 00:06:02,590
Let's say here in that div.
127
00:06:02,590 --> 00:06:05,363
Modal and Backdrop.
128
00:06:06,270 --> 00:06:09,750
Now, if we added like this, they would always be rendered.
129
00:06:09,750 --> 00:06:11,230
I only want to render them
130
00:06:11,230 --> 00:06:13,240
if modalIsOpen is true,
131
00:06:13,240 --> 00:06:15,940
If that state has a value of true.
132
00:06:15,940 --> 00:06:17,484
Now, we are changing the state here.
133
00:06:17,484 --> 00:06:19,110
To use it,
134
00:06:19,110 --> 00:06:22,629
we can simply output a dynamic expression down here
135
00:06:22,629 --> 00:06:27,310
and check if modalIsOpen is truth like this
136
00:06:27,310 --> 00:06:29,730
and then write a ternary expression
137
00:06:29,730 --> 00:06:31,890
where if this is true
138
00:06:31,890 --> 00:06:36,130
we render Modal, and that might look strange,
139
00:06:36,130 --> 00:06:37,839
but that is code what you can write
140
00:06:37,839 --> 00:06:40,430
else, we don't output anything.
141
00:06:40,430 --> 00:06:42,488
So we render null.
142
00:06:42,488 --> 00:06:44,820
This certainly looks strange,
143
00:06:44,820 --> 00:06:48,260
but that is how you can render content conditionally
144
00:06:48,260 --> 00:06:50,520
with React and JSX.
145
00:06:50,520 --> 00:06:52,630
In these dynamic expressions
146
00:06:52,630 --> 00:06:54,180
between the curly braces,
147
00:06:54,180 --> 00:06:58,040
you can again use JSX and that's what I'm doing here.
148
00:06:58,040 --> 00:07:00,181
So I'm checking if modalIsOpen is true.
149
00:07:00,181 --> 00:07:02,460
And if it is, I render the modal
150
00:07:02,460 --> 00:07:04,870
otherwise I don't render anything.
151
00:07:04,870 --> 00:07:09,090
And we can actually use a short trick or shortcut here
152
00:07:09,090 --> 00:07:14,090
and use the double ampersand, the logical and operator here
153
00:07:14,550 --> 00:07:15,710
like this
154
00:07:15,710 --> 00:07:19,270
to simply use the fact that in JavaScript
155
00:07:19,270 --> 00:07:23,180
if you use this operator, if both conditions are true
156
00:07:23,180 --> 00:07:25,892
the second value will be returned.
157
00:07:25,892 --> 00:07:29,490
So if that is true and that is true
158
00:07:29,490 --> 00:07:33,360
and a function, a component function will always be true,
159
00:07:33,360 --> 00:07:36,180
then this component function is output here
160
00:07:36,180 --> 00:07:37,440
and that's simply shorter
161
00:07:37,440 --> 00:07:39,463
than writing this ternary expression.
162
00:07:40,760 --> 00:07:42,200
We can now repeat that.
163
00:07:42,200 --> 00:07:45,770
ModalIsOpen check here, for the Backdrop.
164
00:07:45,770 --> 00:07:50,480
And with that, we only output modal and backdrop
165
00:07:50,480 --> 00:07:52,810
if modalIsOpen is true
166
00:07:52,810 --> 00:07:54,970
and not if it's false
167
00:07:54,970 --> 00:07:58,320
and we do this for every Todo component.
168
00:07:58,320 --> 00:08:00,770
So if we saved this file as well now
169
00:08:01,840 --> 00:08:03,960
we don't see the modal right now
170
00:08:03,960 --> 00:08:06,880
but if we click on delete, we see it.
171
00:08:06,880 --> 00:08:08,270
And now we can't interact
172
00:08:08,270 --> 00:08:11,870
with the rest of this page because of this backdrop.
173
00:08:11,870 --> 00:08:14,430
So that's a great step forward.
174
00:08:14,430 --> 00:08:17,003
How can we now get rid of that modal, though?
13290
Can't find what you're looking for?
Get subtitles in any language from opensubtitles.com, and translate them here.