1
00:00:02,000 --> 00:00:05,000
Now whilst it's nice that we have this overlay here

2
00:00:05,000 --> 00:00:08,000
it's not that nice that we can't get rid of it.

3
00:00:08,000 --> 00:00:10,000
I can type something here,

4
00:00:10,000 --> 00:00:12,000
and you see that it gets updated in the background.

5
00:00:12,000 --> 00:00:15,000
But of course it would be great

6
00:00:15,000 --> 00:00:17,000
if we could close this modal somehow.

7
00:00:17,000 --> 00:00:19,000
For example, by clicking on that backdrop

8
00:00:19,000 --> 00:00:22,000
on that transparent black background.

9
00:00:23,000 --> 00:00:25,000
So how could we achieve this behavior?

10
00:00:27,000 --> 00:00:30,000
Well, in the end, again, with help of state.

11
00:00:30,000 --> 00:00:32,000
You could say one state should be that

12
00:00:32,000 --> 00:00:34,000
the modal is visible, and the never state

13
00:00:34,000 --> 00:00:38,000
should be that it's not visible.

14
00:00:38,000 --> 00:00:40,000
And then for example, by clicking on that background

15
00:00:40,000 --> 00:00:42,000
we wanna update the state

16
00:00:42,000 --> 00:00:47,000
and switch it from is visible to is not visible.

17
00:00:47,000 --> 00:00:49,000
And then we wanna display this entire modal

18
00:00:49,000 --> 00:00:53,000
conditionally based on that state.

19
00:00:54,000 --> 00:00:57,000
So it's in the end a three step process:

20
00:00:57,000 --> 00:00:59,000
register and use state,

21
00:00:59,000 --> 00:01:01,000
add an event listener to this backdrop,

22
00:01:01,000 --> 00:01:05,000
and then use that state to show, or not show, this modal.

23
00:01:06,000 --> 00:01:11,000
So to implement this, I'm back here in posts list JSX

24
00:01:11,000 --> 00:01:14,000
and I'll zoom out a bit since the code keeps

25
00:01:14,000 --> 00:01:15,000
on growing.

26
00:01:15,000 --> 00:01:18,000
And there we now don't just wanna manage these two

27
00:01:18,000 --> 00:01:21,000
values that can be submitted or entered

28
00:01:21,000 --> 00:01:23,000
through that form, but I instead now also want to

29
00:01:23,000 --> 00:01:27,000
add an additional state slice here with useState.

30
00:01:27,000 --> 00:01:29,000
And the position does not matter if it's the first

31
00:01:29,000 --> 00:01:33,000
the second, or the last state, this does not matter.

32
00:01:34,000 --> 00:01:39,000
But here the default value should for example, be true

33
00:01:39,000 --> 00:01:43,000
because here I won't manage some text as a state value,

34
00:01:43,000 --> 00:01:47,000
but instead the modal is visible state.

35
00:01:47,000 --> 00:01:49,000
The name is up to you, but you should try

36
00:01:49,000 --> 00:01:52,000
to describe what's controlled by that state.

37
00:01:52,000 --> 00:01:55,000
And here I want to control the modal visibility.

38
00:01:56,000 --> 00:01:59,000
So I'll name it, modal is visible and the

39
00:01:59,000 --> 00:02:02,000
updating function could be called "set modal"

40
00:02:02,000 --> 00:02:04,000
is visible.

41
00:02:04,000 --> 00:02:06,000
And by default here it's true.

42
00:02:06,000 --> 00:02:09,000
So that we start with the mod being visible.

43
00:02:10,000 --> 00:02:12,000
Of course this alone doesn't do much.

44
00:02:12,000 --> 00:02:16,000
We now also need to add some code to change this

45
00:02:16,000 --> 00:02:19,000
if we click on this background here.

46
00:02:19,000 --> 00:02:21,000
Now to achieve this, we can go to the modal

47
00:02:21,000 --> 00:02:24,000
component because here we got that background.

48
00:02:24,000 --> 00:02:25,000
It's this div here.

49
00:02:26,000 --> 00:02:30,000
And there we can add the on click event listener.

50
00:02:30,000 --> 00:02:32,000
Click is another default event.

51
00:02:32,000 --> 00:02:35,000
And on click is there for a prop we can add to set

52
00:02:35,000 --> 00:02:39,000
up a listener to the click event on that div.

53
00:02:39,000 --> 00:02:42,000
And the function that should be executed

54
00:02:42,000 --> 00:02:45,000
should now not be defined here in this modal.

55
00:02:45,000 --> 00:02:47,000
But again, in posts list.

56
00:02:47,000 --> 00:02:50,000
So again, we're lifting the state up.

57
00:02:51,000 --> 00:02:53,000
Here we can add a new function.

58
00:02:53,000 --> 00:02:57,000
Show model handler for example.

59
00:02:57,000 --> 00:03:01,000
Or in our case actually the hide modal handler,

60
00:03:01,000 --> 00:03:02,000
because that's what we want to do

61
00:03:02,000 --> 00:03:04,000
if the backdrop is clicked.

62
00:03:05,000 --> 00:03:07,000
And here we can call set modal is visible

63
00:03:07,000 --> 00:03:10,000
and set it to false as a new state value.

64
00:03:12,000 --> 00:03:15,000
Now we have to pass this function

65
00:03:15,000 --> 00:03:19,000
as a value to the modal component here.

66
00:03:19,000 --> 00:03:22,000
So here we could add a prop called on close.

67
00:03:22,000 --> 00:03:24,000
It's your component.

68
00:03:24,000 --> 00:03:26,000
So to prop them is up to you.

69
00:03:26,000 --> 00:03:29,000
And pass the hide modal handler

70
00:03:29,000 --> 00:03:32,000
as a value to on close, again

71
00:03:32,000 --> 00:03:35,000
without parenthesis, passing the function itself

72
00:03:35,000 --> 00:03:39,000
as a value rather than the return value of that function.

73
00:03:39,000 --> 00:03:40,000
Which is what we would pass

74
00:03:40,000 --> 00:03:43,000
if we would have parentheses here.

75
00:03:43,000 --> 00:03:45,000
So we passed the function itself.

76
00:03:46,000 --> 00:03:49,000
And since I named the prop on close here

77
00:03:49,000 --> 00:03:53,000
in the model component, we can now also restructure this

78
00:03:53,000 --> 00:03:56,000
on close prop here, and set it as a value

79
00:03:56,000 --> 00:03:58,000
to on click.

80
00:03:58,000 --> 00:04:00,000
So that this function, which we receive

81
00:04:00,000 --> 00:04:03,000
on the on close prop is set as a value

82
00:04:03,000 --> 00:04:05,000
for the on click prop.

83
00:04:05,000 --> 00:04:07,000
Hence wiring this click listener up

84
00:04:07,000 --> 00:04:12,000
to this height modal handler function in the end.

85
00:04:13,000 --> 00:04:15,000
Now with that, we have a way of updating the state

86
00:04:15,000 --> 00:04:19,000
but right now we still wouldn't see any effect on the screen

87
00:04:19,000 --> 00:04:21,000
because we're not doing anything with

88
00:04:21,000 --> 00:04:23,000
that modal is visible state.

89
00:04:23,000 --> 00:04:26,000
We're updating it, but we're not using it thereafter.

90
00:04:26,000 --> 00:04:28,000
And that's the last step.

91
00:04:28,000 --> 00:04:31,000
Now we wanna render this modal conditionally.

92
00:04:31,000 --> 00:04:33,000
Based on our state.

93
00:04:34,000 --> 00:04:37,000
So the goal is to only render this piece of code here.

94
00:04:37,000 --> 00:04:41,000
This JSX code, if modal is visible is true.

95
00:04:41,000 --> 00:04:42,000
Now how can we achieve this?

96
00:04:43,000 --> 00:04:45,000
Again, with a dynamic value

97
00:04:45,000 --> 00:04:48,000
so with single curly braces.

98
00:04:48,000 --> 00:04:51,000
But now we don't just wanna output modal is visible.

99
00:04:51,000 --> 00:04:53,000
We don't just wanna output true or false,

100
00:04:53,000 --> 00:04:55,000
but instead we wanna control

101
00:04:55,000 --> 00:04:57,000
what's being shown on the screen.

102
00:04:57,000 --> 00:05:00,000
We could achieve this with a ternary expression.

103
00:05:00,000 --> 00:05:04,000
If that's true.

104
00:05:04,000 --> 00:05:06,000
And for that, we can also just check mod is visible.

105
00:05:06,000 --> 00:05:08,000
We want to output this content.

106
00:05:08,000 --> 00:05:12,000
And indeed you can cut and paste that content here

107
00:05:12,000 --> 00:05:14,000
after the question mark.

108
00:05:14,000 --> 00:05:15,000
And then add a colon here,

109
00:05:15,000 --> 00:05:17,000
since I'm writing a ternary expression

110
00:05:17,000 --> 00:05:20,000
where we also define what should be rendered

111
00:05:20,000 --> 00:05:22,000
if this is false.

112
00:05:23,000 --> 00:05:24,000
And that could be null.

113
00:05:24,000 --> 00:05:28,000
Null is something you can output as part of your JSX code

114
00:05:28,000 --> 00:05:32,000
and it will simply lead to nothing being rendered here.

115
00:05:34,000 --> 00:05:36,000
Alternatively, you could also set this to false

116
00:05:36,000 --> 00:05:39,000
and this would also render nothing.

117
00:05:40,000 --> 00:05:42,000
If I now save this, you see, by default

118
00:05:42,000 --> 00:05:45,000
this is open, which should make sense

119
00:05:45,000 --> 00:05:47,000
because our default state value is true

120
00:05:47,000 --> 00:05:50,000
for modal is visible.

121
00:05:51,000 --> 00:05:55,000
But if I click on this backdrop, it disappears

122
00:05:55,000 --> 00:05:59,000
And it disappears because I set the state

123
00:05:59,000 --> 00:06:00,000
to false.

124
00:06:00,000 --> 00:06:02,000
That's what we do here.

125
00:06:02,000 --> 00:06:05,000
And thanks to this ternary expression,

126
00:06:05,000 --> 00:06:07,000
it's then this L's that becomes active.

127
00:06:07,000 --> 00:06:10,000
And if you output false, or null here,

128
00:06:10,000 --> 00:06:12,000
nothing gets displayed

129
00:06:12,000 --> 00:06:16,000
on the screen in this place in your JSX code.

130
00:06:16,000 --> 00:06:18,000
The other parts, like this list,

131
00:06:18,000 --> 00:06:21,000
are still being output, but this content to be

132
00:06:21,000 --> 00:06:23,000
precise, is now rendered conditionally.

133
00:06:23,000 --> 00:06:26,000
With help of the ternary expression.

134
00:06:28,000 --> 00:06:30,000
Now there are other approaches, as well.

135
00:06:30,000 --> 00:06:32,000
We could, for example, add a variable

136
00:06:32,000 --> 00:06:35,000
modal content and by default set that

137
00:06:35,000 --> 00:06:39,000
to nothing, so to undefined.

138
00:06:39,000 --> 00:06:43,000
And then check if modal is visible is true.

139
00:06:43,000 --> 00:06:45,000
And in that case, set modal content to

140
00:06:45,000 --> 00:06:48,000
this JSX code.

141
00:06:49,000 --> 00:06:52,000
You can store JSX code in variables, as well.

142
00:06:52,000 --> 00:06:55,000
You can not just return it in functions.

143
00:06:55,000 --> 00:06:59,000
You can use it anywhere where a value is wanted.

144
00:06:59,000 --> 00:07:03,000
And then down here in the JSX code we do return,

145
00:07:03,000 --> 00:07:06,000
we could now just refer to modal content.

146
00:07:08,000 --> 00:07:10,000
And this would now either be nothing,

147
00:07:10,000 --> 00:07:12,000
undefined, which also leads to nothing

148
00:07:12,000 --> 00:07:15,000
being output on the screen.

149
00:07:15,000 --> 00:07:17,000
Or it's this content.

150
00:07:18,000 --> 00:07:20,000
Now we are using a variable here,

151
00:07:20,000 --> 00:07:22,000
but we'll see the updated content nonetheless,

152
00:07:22,000 --> 00:07:25,000
because we are using a state value,

153
00:07:25,000 --> 00:07:28,000
which is updated with our State updating function here

154
00:07:28,000 --> 00:07:31,000
in the posts list component.

155
00:07:31,000 --> 00:07:33,000
So this variable will only receive a new value

156
00:07:33,000 --> 00:07:37,000
if the state was updated with that state

157
00:07:37,000 --> 00:07:38,000
updating function and therefore this

158
00:07:38,000 --> 00:07:41,000
component function was executed again.

159
00:07:41,000 --> 00:07:43,000
Hence we'll see the updated JSX snapshot

160
00:07:43,000 --> 00:07:46,000
being reflected on the screen.

161
00:07:46,000 --> 00:07:48,000
So with that code, if I reload the page,

162
00:07:48,000 --> 00:07:49,000
it will still close

163
00:07:49,000 --> 00:07:51,000
if I click on the backdrop.

164
00:07:52,000 --> 00:07:55,000
And one last alternative, which I want to show you,

165
00:07:55,000 --> 00:07:57,000
though this here is a great approach,

166
00:07:57,000 --> 00:07:59,000
since it's also quite readable, is that

167
00:07:59,000 --> 00:08:02,000
you go back here in your JSX code,

168
00:08:02,000 --> 00:08:05,000
and instead of writing a ternary expression

169
00:08:05,000 --> 00:08:07,000
you use the modal is visible,

170
00:08:07,000 --> 00:08:09,000
state value again,

171
00:08:09,000 --> 00:08:12,000
and then the logical and operator here,

172
00:08:12,000 --> 00:08:16,000
to then define the content that should be output.

173
00:08:16,000 --> 00:08:18,000
If modal is visible, is truthy.

174
00:08:18,000 --> 00:08:20,000
So if it's true, in this case.

175
00:08:20,000 --> 00:08:22,000
Due to the way JavaScript works

176
00:08:22,000 --> 00:08:24,000
it will now output this content only

177
00:08:24,000 --> 00:08:28,000
if this value here is truthy, if it's true,

178
00:08:28,000 --> 00:08:30,000
and otherwise it will output nothing.

179
00:08:30,000 --> 00:08:33,000
Or to be precise, it will output the falsey value,

180
00:08:33,000 --> 00:08:35,000
false in this case.

181
00:08:35,000 --> 00:08:36,000
And that, as you learned,

182
00:08:36,000 --> 00:08:39,000
will lead to nothing showing up on the screen.

183
00:08:39,000 --> 00:08:43,000
So here we're using standard JavaScript to render nothing,

184
00:08:43,000 --> 00:08:44,000
or the modal.

185
00:08:44,000 --> 00:08:46,000
So that's another approach of making sure

186
00:08:46,000 --> 00:08:48,000
that we can hide it.

187
00:08:49,000 --> 00:08:51,000
And no matter which approach you prefer,

188
00:08:51,000 --> 00:08:53,000
all three approaches are fine.

189
00:08:53,000 --> 00:08:57,000
But that's how you can render content conditionally.