1
00:00:02,000 --> 00:00:04,000
To get rid of the modal and the Backdrop now

2
00:00:04,000 --> 00:00:06,000
we need to change the state again

3
00:00:06,000 --> 00:00:10,000
from setModalIsOpen true to false.

4
00:00:10,000 --> 00:00:12,000
We need to call setModalIsOpen again

5
00:00:12,000 --> 00:00:14,000
and pass false as a value.

6
00:00:15,000 --> 00:00:19,000
The problem just is when do we wanna do that?

7
00:00:19,000 --> 00:00:21,000
We wanna do that when the Backdrop is clicked

8
00:00:21,000 --> 00:00:24,000
or when the Cancel or Confirm buttons are clicked.

9
00:00:24,000 --> 00:00:26,000
We don't wanna do that

10
00:00:26,000 --> 00:00:28,000
if the modal itself is clicked for example.

11
00:00:29,000 --> 00:00:31,000
Now for the Backdrop click,

12
00:00:31,000 --> 00:00:33,000
you could think that on Backdrop,

13
00:00:33,000 --> 00:00:36,000
you simply add onClick again

14
00:00:36,000 --> 00:00:38,000
and then we add a second function here

15
00:00:38,000 --> 00:00:43,000
the closeModalHandler, let's say

16
00:00:44,000 --> 00:00:48,000
and there we call setModalIsOpen and set this to false.

17
00:00:48,000 --> 00:00:52,000
And then we point at this closeModalHandler here

18
00:00:52,000 --> 00:00:54,000
as a value for onClick,

19
00:00:54,000 --> 00:00:56,000
just as we did it with the button in the end.

20
00:00:57,000 --> 00:00:59,000
But that won't work.

21
00:00:59,000 --> 00:01:00,000
If we save that

22
00:01:01,000 --> 00:01:02,000
and I reload,

23
00:01:02,000 --> 00:01:04,000
I can click the Backdrop the entire day

24
00:01:04,000 --> 00:01:06,000
the modal won't close.

25
00:01:07,000 --> 00:01:08,000
The reason for this is that,

26
00:01:08,000 --> 00:01:12,000
the Backdrop like the modal is our own component.

27
00:01:12,000 --> 00:01:16,000
These are not built-in components.

28
00:01:16,000 --> 00:01:18,000
So they don't know the onClick prop.

29
00:01:18,000 --> 00:01:23,000
Our own components have to be configured 100% by us.

30
00:01:23,000 --> 00:01:27,000
They have no built-in props which we can use.

31
00:01:27,000 --> 00:01:29,000
To be precise, they actually do

32
00:01:29,000 --> 00:01:31,000
but only for some very special cases

33
00:01:31,000 --> 00:01:35,000
and not for event listeners like this.

34
00:01:35,000 --> 00:01:38,000
So if you wanna make sure that our onClick prop exists

35
00:01:38,000 --> 00:01:42,000
in the Backdrop component, we have to add code

36
00:01:42,000 --> 00:01:45,000
to this component function to support this prop.

37
00:01:45,000 --> 00:01:48,000
And for this we can go to the component function

38
00:01:48,000 --> 00:01:50,000
and accept this props.

39
00:01:50,000 --> 00:01:53,000
Argument here does props parameter

40
00:01:53,000 --> 00:01:56,000
and then here, we can of course work

41
00:01:56,000 --> 00:01:59,000
with the onClick prop or any other name we want.

42
00:01:59,000 --> 00:02:02,000
It's totally up to you because it's our component.

43
00:02:03,000 --> 00:02:07,000
But here we can, for example, expect a onClick prop

44
00:02:07,000 --> 00:02:10,000
because I'm setting this here in the to-do component,

45
00:02:10,000 --> 00:02:14,000
and we actually expect a function as a value

46
00:02:14,000 --> 00:02:16,000
on this onClick prop

47
00:02:16,000 --> 00:02:17,000
because in the to-do component

48
00:02:17,000 --> 00:02:20,000
I do pass in a function in the end.

49
00:02:20,000 --> 00:02:22,000
I point at a function

50
00:02:22,000 --> 00:02:25,000
which means I pass a point or two to function

51
00:02:25,000 --> 00:02:27,000
as a value it for this prop.

52
00:02:29,000 --> 00:02:31,000
Now in the Backdrop component

53
00:02:31,000 --> 00:02:33,000
we actually wanna call this function,

54
00:02:33,000 --> 00:02:36,000
which we receive on the onClick prop

55
00:02:36,000 --> 00:02:38,000
when this div is clicked.

56
00:02:38,000 --> 00:02:41,000
Now the div is a built-in component again,

57
00:02:41,000 --> 00:02:44,000
so it does have onClick prop

58
00:02:44,000 --> 00:02:46,000
and now we could simply point

59
00:02:46,000 --> 00:02:49,000
at props onClick as a value here.

60
00:02:49,000 --> 00:02:51,000
By doing this we would in the end

61
00:02:51,000 --> 00:02:55,000
forward the function which we receive on our props here

62
00:02:55,000 --> 00:02:57,000
on our onClick prop

63
00:02:57,000 --> 00:03:02,000
into that div on it's onClick prop.

64
00:03:02,000 --> 00:03:04,000
And these names don't have to be equal.

65
00:03:04,000 --> 00:03:08,000
We could expect a onCancel prop here instead

66
00:03:08,000 --> 00:03:11,000
and in to do component rename this to onCancel.

67
00:03:12,000 --> 00:03:15,000
It's our components so we can name this however we want.

68
00:03:16,000 --> 00:03:19,000
Now if we do that and save all the files,

69
00:03:19,000 --> 00:03:22,000
if I reload, now we can close the modal

70
00:03:22,000 --> 00:03:24,000
by clicking the Backdrop

71
00:03:24,000 --> 00:03:27,000
because now we're using a prop

72
00:03:27,000 --> 00:03:29,000
to pass a function as a value.

73
00:03:29,000 --> 00:03:31,000
And that's a pattern which can be confusing

74
00:03:31,000 --> 00:03:33,000
and might look strange at first,

75
00:03:33,000 --> 00:03:36,000
but keep in mind that in Java script

76
00:03:36,000 --> 00:03:39,000
functions are first class objects.

77
00:03:39,000 --> 00:03:42,000
You can pass them around as values

78
00:03:42,000 --> 00:03:44,000
just as you can pass strings

79
00:03:44,000 --> 00:03:48,000
and arrays and objects and numbers as values.

80
00:03:48,000 --> 00:03:50,000
Hence you can pass a function as arguments

81
00:03:50,000 --> 00:03:54,000
to another function and therefore also as a value

82
00:03:54,000 --> 00:03:57,000
for a prop to a number of component.

83
00:03:57,000 --> 00:04:00,000
And then that function which we receive in that component

84
00:04:00,000 --> 00:04:03,000
can be executed in that component

85
00:04:03,000 --> 00:04:06,000
or as we're doing it here, it can be forwarded

86
00:04:06,000 --> 00:04:10,000
to yet another element another component.

87
00:04:10,000 --> 00:04:13,000
Now we can use that same approach

88
00:04:13,000 --> 00:04:17,000
in the modal component for canceling and confirming.

89
00:04:17,000 --> 00:04:22,000
There we could add functions like the cancelHandler.

90
00:04:22,000 --> 00:04:25,000
and then let's say the confirmHandler

91
00:04:25,000 --> 00:04:27,000
and kick off different logic

92
00:04:27,000 --> 00:04:30,000
depending on which button was clicked,

93
00:04:30,000 --> 00:04:32,000
but in this case, I'll simply

94
00:04:32,000 --> 00:04:35,000
in the end run the same code in both functions.

95
00:04:35,000 --> 00:04:38,000
Nonetheless, we can bind the first button

96
00:04:38,000 --> 00:04:41,000
with the onClick prop to cancelHandler,

97
00:04:41,000 --> 00:04:43,000
and here it has to be onClick

98
00:04:43,000 --> 00:04:45,000
because that's not a custom component,

99
00:04:45,000 --> 00:04:47,000
but a built-in one.

100
00:04:47,000 --> 00:04:50,000
So here we can't come up with any other name.

101
00:04:50,000 --> 00:04:53,000
And for the Confirm button I'll also add onClick

102
00:04:53,000 --> 00:04:55,000
and point at the confirmHandler.

103
00:04:56,000 --> 00:04:58,000
And now in these functions

104
00:04:58,000 --> 00:05:00,000
we can run any code we want.

105
00:05:00,000 --> 00:05:02,000
In this case though I also wanna

106
00:05:02,000 --> 00:05:04,000
just close the modal.

107
00:05:04,000 --> 00:05:08,000
So again, I'll just accept the props parameter here

108
00:05:08,000 --> 00:05:09,000
and then cancelHandler,

109
00:05:09,000 --> 00:05:14,000
I'll just execute props on Cancel let's say

110
00:05:14,000 --> 00:05:15,000
in the confirmHandler

111
00:05:15,000 --> 00:05:18,000
I'll execute props on Confirm.

112
00:05:19,000 --> 00:05:22,000
And hence instead of defining these functions here

113
00:05:22,000 --> 00:05:23,000
and pointing at them here

114
00:05:23,000 --> 00:05:27,000
we could have also just forwarded props onCancel here

115
00:05:27,000 --> 00:05:28,000
like this.

116
00:05:28,000 --> 00:05:31,000
Just as we did it for the Backdrop.

117
00:05:31,000 --> 00:05:33,000
I'm just showing this alternative approach

118
00:05:33,000 --> 00:05:35,000
to make it crystal clear

119
00:05:35,000 --> 00:05:37,000
that you can execute these functions

120
00:05:37,000 --> 00:05:39,000
which you receive through props.

121
00:05:39,000 --> 00:05:41,000
You can forward them to other elements

122
00:05:41,000 --> 00:05:43,000
if that's what you need to do

123
00:05:43,000 --> 00:05:46,000
but you can also execute them anywhere in your components.

124
00:05:46,000 --> 00:05:49,000
And hence, I'm using this alternative setup

125
00:05:49,000 --> 00:05:52,000
with these extra wrapper functions

126
00:05:52,000 --> 00:05:53,000
at which I then point here.

127
00:05:55,000 --> 00:05:58,000
And now we've got our onCancel and onConfirm prop

128
00:05:58,000 --> 00:06:01,000
which are expected on that modal component.

129
00:06:01,000 --> 00:06:05,000
So in the place where we use the modal component,

130
00:06:05,000 --> 00:06:09,000
we should add onCancel and onConfirm.

131
00:06:10,000 --> 00:06:12,000
And here in both cases

132
00:06:12,000 --> 00:06:15,000
I'll just point at the closeModalHandler

133
00:06:15,000 --> 00:06:17,000
because as mentioned before,

134
00:06:17,000 --> 00:06:19,000
here I got no special logic

135
00:06:19,000 --> 00:06:21,000
I just wanna close the modal.

136
00:06:23,000 --> 00:06:27,000
With that if we save this and reload

137
00:06:27,000 --> 00:06:30,000
we cannot just close the modal by clicking the Backdrop

138
00:06:30,000 --> 00:06:35,000
but also by clicking Cancel or by clicking Confirm.

139
00:06:35,000 --> 00:06:37,000
And that works for every to-do here.

140
00:06:37,000 --> 00:06:41,000
For all to-dos the modal works in the same way.

141
00:06:41,000 --> 00:06:44,000
And that's there for another very important

142
00:06:44,000 --> 00:06:46,000
building block of react.

143
00:06:46,000 --> 00:06:50,000
Props are important for building reusable components,

144
00:06:50,000 --> 00:06:54,000
state is important for changing what we see

145
00:06:54,000 --> 00:06:56,000
on the screen dynamically

146
00:06:56,000 --> 00:06:59,000
for adding or removing elements

147
00:06:59,000 --> 00:07:01,000
for changing text on the screen

148
00:07:01,000 --> 00:07:06,000
or like in this case for showing and hiding an overlay.