1
00:00:02,000 --> 00:00:03,000
In order to change

2
00:00:03,000 --> 00:00:04,000
what's visible on the screen,

3
00:00:04,000 --> 00:00:08,000
we need to change the state of this app,

4
00:00:08,000 --> 00:00:09,000
so to say.

5
00:00:09,000 --> 00:00:12,000
Now, attached you find an extra article and video

6
00:00:12,000 --> 00:00:13,000
which I created

7
00:00:13,000 --> 00:00:16,000
where I explain what state is.

8
00:00:16,000 --> 00:00:18,000
In the end, you can take it quite literally though.

9
00:00:18,000 --> 00:00:20,000
The current state of this application

10
00:00:20,000 --> 00:00:25,000
is that we have free Todos and this overlay is open.

11
00:00:26,000 --> 00:00:29,000
Now, we would like to also be able to present

12
00:00:29,000 --> 00:00:33,000
another state, where this overlay is closed.

13
00:00:33,000 --> 00:00:35,000
And we want to switch between the states.

14
00:00:35,000 --> 00:00:38,000
When we click on delete, then it should open.

15
00:00:38,000 --> 00:00:39,000
And when we click on cancel

16
00:00:39,000 --> 00:00:41,000
or confirm or the backdrop,

17
00:00:41,000 --> 00:00:43,000
it should close.

18
00:00:43,000 --> 00:00:46,000
So that should be our ways of switching between the states

19
00:00:46,000 --> 00:00:49,000
and React has a built in concept that helps us with that.

20
00:00:49,000 --> 00:00:53,000
And conveniently, it's called State.

21
00:00:53,000 --> 00:00:57,000
For this, let's go to our Todo.js file,

22
00:00:57,000 --> 00:00:58,000
to our Todo component.

23
00:00:58,000 --> 00:01:00,000
Here, we got this delete handler,

24
00:01:00,000 --> 00:01:02,000
this function which is triggered

25
00:01:02,000 --> 00:01:04,000
when the delete button is clicked.

26
00:01:04,000 --> 00:01:07,000
When it is clicked, we would like to switch to the state

27
00:01:07,000 --> 00:01:09,000
where the modal is open.

28
00:01:09,000 --> 00:01:12,000
To make that happen, we need to import some functionality

29
00:01:12,000 --> 00:01:15,000
from the React library.

30
00:01:15,000 --> 00:01:17,000
So we import from React.

31
00:01:17,000 --> 00:01:18,000
Import here.

32
00:01:18,000 --> 00:01:20,000
We have no dot slash

33
00:01:20,000 --> 00:01:23,000
because React is a third party library.

34
00:01:23,000 --> 00:01:27,000
You import from those by just referencing the library name.

35
00:01:28,000 --> 00:01:31,000
And then we import something like this

36
00:01:31,000 --> 00:01:32,000
with curly braces.

37
00:01:32,000 --> 00:01:36,000
We import the useState function.

38
00:01:36,000 --> 00:01:39,000
That is a function exposed by the React library

39
00:01:39,000 --> 00:01:42,000
which we can use in our component functions.

40
00:01:43,000 --> 00:01:48,000
With useState, we register different States,

41
00:01:48,000 --> 00:01:51,000
which we want to support in our React application

42
00:01:51,000 --> 00:01:54,000
and React will react to changes in that state

43
00:01:54,000 --> 00:01:58,000
and allow us as a developer to render different output

44
00:01:58,000 --> 00:02:01,000
depending on which State is active.

45
00:02:01,000 --> 00:02:04,000
Now, that all starts with calling useState

46
00:02:04,000 --> 00:02:08,000
directly in our component function like this.

47
00:02:08,000 --> 00:02:10,000
So not inside of delete handler

48
00:02:10,000 --> 00:02:12,000
instead, directly in the component function.

49
00:02:13,000 --> 00:02:16,000
UseState is a so-called React hook

50
00:02:16,000 --> 00:02:20,000
and those React hooks can only be called directly

51
00:02:20,000 --> 00:02:24,000
in React component functions and in custom hooks

52
00:02:24,000 --> 00:02:27,000
which is a topic will not discuss in this course

53
00:02:27,000 --> 00:02:31,000
but which is discussed in depth in my complete guide as well

54
00:02:31,000 --> 00:02:33,000
For the moment it's enough that we know

55
00:02:33,000 --> 00:02:38,000
that we can use React Hooks in React component functions.

56
00:02:38,000 --> 00:02:41,000
Now, calling useState creates a state React

57
00:02:41,000 --> 00:02:42,000
as a wear ofF.

58
00:02:42,000 --> 00:02:45,000
Now, we can give this state a starting value

59
00:02:45,000 --> 00:02:48,000
by passing it here as an argument to useState.

60
00:02:48,000 --> 00:02:52,000
And that could be false if our state is

61
00:02:52,000 --> 00:02:55,000
that we want to control whether the modal is open or not

62
00:02:55,000 --> 00:02:58,000
and initially, it should not be open.

63
00:02:58,000 --> 00:03:00,000
So the initial state is false.

64
00:03:00,000 --> 00:03:05,000
Now, useState always returns an array

65
00:03:05,000 --> 00:03:07,000
with exactly two elements.

66
00:03:07,000 --> 00:03:09,000
That's how useState works.

67
00:03:09,000 --> 00:03:12,000
It always returns an array with two elements

68
00:03:12,000 --> 00:03:15,000
and we can store it as returned array in a constant

69
00:03:15,000 --> 00:03:18,000
or we use array de-structuring

70
00:03:18,000 --> 00:03:22,000
which is a JavaScript feature to store these two elements,

71
00:03:22,000 --> 00:03:25,000
since we know that it will be always two elements,

72
00:03:25,000 --> 00:03:27,000
indifferent constants

73
00:03:27,000 --> 00:03:31,000
and we could give to first constant a name of showModal

74
00:03:32,000 --> 00:03:35,000
or modalIsOpen open or anything like this.

75
00:03:35,000 --> 00:03:39,000
And the second element here,

76
00:03:39,000 --> 00:03:41,000
the second constant

77
00:03:41,000 --> 00:03:42,000
a name of setModalIsOpen.

78
00:03:44,000 --> 00:03:46,000
Now, why did I choose these names?

79
00:03:46,000 --> 00:03:48,000
Because the first element,

80
00:03:48,000 --> 00:03:51,000
which useState returns in its array

81
00:03:51,000 --> 00:03:54,000
is the current state snapshot.

82
00:03:54,000 --> 00:03:58,000
So this value, which is stored in this state.

83
00:03:58,000 --> 00:04:01,000
You can think of React state as a variable

84
00:04:01,000 --> 00:04:03,000
which is managed for you by React.

85
00:04:03,000 --> 00:04:06,000
You define the initial value here

86
00:04:06,000 --> 00:04:08,000
and you will then also be able to change that value.

87
00:04:08,000 --> 00:04:11,000
Now, you get access to the currently stored value

88
00:04:11,000 --> 00:04:14,000
for this first element here.

89
00:04:14,000 --> 00:04:15,000
The second element

90
00:04:15,000 --> 00:04:18,000
is a function that allows you to change that value

91
00:04:18,000 --> 00:04:20,000
because you don't change it

92
00:04:20,000 --> 00:04:23,000
by assigning a new value to modalIsOpen

93
00:04:23,000 --> 00:04:26,000
instead, you always call this second function

94
00:04:26,000 --> 00:04:28,000
to assign a new value.

95
00:04:28,000 --> 00:04:30,000
Why does this matter?

96
00:04:30,000 --> 00:04:33,000
Because whenever you call this state changing function

97
00:04:33,000 --> 00:04:37,000
React will in the end re-execute

98
00:04:37,000 --> 00:04:40,000
the component function to which this state belongs

99
00:04:40,000 --> 00:04:42,000
and re-evaluate it,

100
00:04:42,000 --> 00:04:45,000
and also update what's rendered on the screen.

101
00:04:45,000 --> 00:04:49,000
This allows you to pick up the latest state value

102
00:04:49,000 --> 00:04:51,000
and possibly render something different

103
00:04:51,000 --> 00:04:53,000
depending on the state.

104
00:04:53,000 --> 00:04:56,000
Notice it might still be a bit abstract.

105
00:04:56,000 --> 00:04:59,000
It will become crystal clear in a couple of seconds.

106
00:04:59,000 --> 00:05:02,000
What we can do now with these two elements

107
00:05:02,000 --> 00:05:03,000
is that in delete handler,

108
00:05:03,000 --> 00:05:07,000
we call setModalIsOpen and set is to true.

109
00:05:07,000 --> 00:05:11,000
To change that modalIsOpen state from false,

110
00:05:11,000 --> 00:05:13,000
which is our initial state, to true.

111
00:05:13,000 --> 00:05:16,000
And then we use modalIsOpen

112
00:05:16,000 --> 00:05:19,000
to conditionally render the modal and backdrop

113
00:05:19,000 --> 00:05:21,000
down there in this JSX code.

114
00:05:22,000 --> 00:05:27,000
So I go to App.js and I remove modal and backdrop from there

115
00:05:27,000 --> 00:05:28,000
and remove the imports

116
00:05:28,000 --> 00:05:31,000
since we're not using modal and backdrop

117
00:05:31,000 --> 00:05:32,000
in this file anymore.

118
00:05:33,000 --> 00:05:36,000
And instead I'll go to Todo.js

119
00:05:36,000 --> 00:05:40,000
and import modal there from ./Modal

120
00:05:40,000 --> 00:05:44,000
and import backdrop here from ./Backdrop.

121
00:05:44,000 --> 00:05:48,000
Constructing the relative paths to these files

122
00:05:48,000 --> 00:05:52,000
as seen from inside this Todo.js file.

123
00:05:52,000 --> 00:05:55,000
And since modal and backdrop are neighbors to this file,

124
00:05:55,000 --> 00:05:57,000
the paths look just like this

125
00:05:58,000 --> 00:06:00,000
and then we can use these components down here.

126
00:06:00,000 --> 00:06:02,000
Let's say here in that div.

127
00:06:02,000 --> 00:06:05,000
Modal and Backdrop.

128
00:06:06,000 --> 00:06:09,000
Now, if we added like this, they would always be rendered.

129
00:06:09,000 --> 00:06:11,000
I only want to render them

130
00:06:11,000 --> 00:06:13,000
if modalIsOpen is true,

131
00:06:13,000 --> 00:06:15,000
If that state has a value of true.

132
00:06:15,000 --> 00:06:17,000
Now, we are changing the state here.

133
00:06:17,000 --> 00:06:19,000
To use it,

134
00:06:19,000 --> 00:06:22,000
we can simply output a dynamic expression down here

135
00:06:22,000 --> 00:06:27,000
and check if modalIsOpen is truth like this

136
00:06:27,000 --> 00:06:29,000
and then write a ternary expression

137
00:06:29,000 --> 00:06:31,000
where if this is true

138
00:06:31,000 --> 00:06:36,000
we render Modal, and that might look strange,

139
00:06:36,000 --> 00:06:37,000
but that is code what you can write

140
00:06:37,000 --> 00:06:40,000
else, we don't output anything.

141
00:06:40,000 --> 00:06:42,000
So we render null.

142
00:06:42,000 --> 00:06:44,000
This certainly looks strange,

143
00:06:44,000 --> 00:06:48,000
but that is how you can render content conditionally

144
00:06:48,000 --> 00:06:50,000
with React and JSX.

145
00:06:50,000 --> 00:06:52,000
In these dynamic expressions

146
00:06:52,000 --> 00:06:54,000
between the curly braces,

147
00:06:54,000 --> 00:06:58,000
you can again use JSX and that's what I'm doing here.

148
00:06:58,000 --> 00:07:00,000
So I'm checking if modalIsOpen is true.

149
00:07:00,000 --> 00:07:02,000
And if it is, I render the modal

150
00:07:02,000 --> 00:07:04,000
otherwise I don't render anything.

151
00:07:04,000 --> 00:07:09,000
And we can actually use a short trick or shortcut here

152
00:07:09,000 --> 00:07:14,000
and use the double ampersand, the logical and operator here

153
00:07:14,000 --> 00:07:15,000
like this

154
00:07:15,000 --> 00:07:19,000
to simply use the fact that in JavaScript

155
00:07:19,000 --> 00:07:23,000
if you use this operator, if both conditions are true

156
00:07:23,000 --> 00:07:25,000
the second value will be returned.

157
00:07:25,000 --> 00:07:29,000
So if that is true and that is true

158
00:07:29,000 --> 00:07:33,000
and a function, a component function will always be true,

159
00:07:33,000 --> 00:07:36,000
then this component function is output here

160
00:07:36,000 --> 00:07:37,000
and that's simply shorter

161
00:07:37,000 --> 00:07:39,000
than writing this ternary expression.

162
00:07:40,000 --> 00:07:42,000
We can now repeat that.

163
00:07:42,000 --> 00:07:45,000
ModalIsOpen check here, for the Backdrop.

164
00:07:45,000 --> 00:07:50,000
And with that, we only output modal and backdrop

165
00:07:50,000 --> 00:07:52,000
if modalIsOpen is true

166
00:07:52,000 --> 00:07:54,000
and not if it's false

167
00:07:54,000 --> 00:07:58,000
and we do this for every Todo component.

168
00:07:58,000 --> 00:08:00,000
So if we saved this file as well now

169
00:08:01,000 --> 00:08:03,000
we don't see the modal right now

170
00:08:03,000 --> 00:08:06,000
but if we click on delete, we see it.

171
00:08:06,000 --> 00:08:08,000
And now we can't interact

172
00:08:08,000 --> 00:08:11,000
with the rest of this page because of this backdrop.

173
00:08:11,000 --> 00:08:14,000
So that's a great step forward.

174
00:08:14,000 --> 00:08:17,000
How can we now get rid of that modal, though?