1
00:00:01,230 --> 00:00:02,730
‫So in this video

2
00:00:02,730 --> 00:00:05,190
‫we're gonna go back to our project

3
00:00:05,190 --> 00:00:08,820
‫and build a simple modal window component

4
00:00:08,820 --> 00:00:11,430
‫using React's portal feature

5
00:00:11,430 --> 00:00:14,580
‫so that we can then convert this modal

6
00:00:14,580 --> 00:00:17,823
‫to a compound component in the next video.

7
00:00:19,568 --> 00:00:23,460
‫So as I have mentioned earlier here in our cabins page

8
00:00:23,460 --> 00:00:27,030
‫we actually want this form to add a new cabin

9
00:00:27,030 --> 00:00:29,760
‫to appear in a modal window.

10
00:00:29,760 --> 00:00:32,970
‫So not just here rendered on the page

11
00:00:32,970 --> 00:00:37,440
‫but we want basically a new window to open on top of this

12
00:00:37,440 --> 00:00:40,620
‫and then display our form in there.

13
00:00:40,620 --> 00:00:44,643
‫And so let's now build that reusable modal component.

14
00:00:46,350 --> 00:00:49,470
‫Now we already have a file for that.

15
00:00:49,470 --> 00:00:54,060
‫So here in the UI folder we have modal.jsx

16
00:00:54,060 --> 00:00:59,060
‫which already contains these three styled components for us.

17
00:00:59,400 --> 00:01:04,320
‫And so now all we have to do is to basically assemble these

18
00:01:04,320 --> 00:01:08,070
‫and then use this modal in our application.

19
00:01:08,070 --> 00:01:12,750
‫So just to test this now and to return something

20
00:01:12,750 --> 00:01:16,833
‫let's use this StyledModal component that we have up there.

21
00:01:18,000 --> 00:01:19,983
‫And then let's just render Modal.

22
00:01:22,350 --> 00:01:25,050
‫So we have this StyledModal here

23
00:01:25,050 --> 00:01:27,090
‫which contains some styles

24
00:01:27,090 --> 00:01:31,050
‫and we will actually take a look at that a bit later.

25
00:01:31,050 --> 00:01:34,590
‫So for now, let's just include this modal here.

26
00:01:34,590 --> 00:01:39,270
‫And so for that, let's come to the cabins page.

27
00:01:39,270 --> 00:01:41,610
‫And so right now here we have that logic

28
00:01:41,610 --> 00:01:43,080
‫where we have the button

29
00:01:43,080 --> 00:01:46,470
‫and then, conditionally based on the state,

30
00:01:46,470 --> 00:01:48,300
‫we display the form.

31
00:01:48,300 --> 00:01:52,050
‫Now for the modal, we will actually have something similar

32
00:01:52,050 --> 00:01:55,800
‫but let's move all this logic here to a separate component

33
00:01:55,800 --> 00:01:57,660
‫because as we said initially

34
00:01:57,660 --> 00:02:01,770
‫we want all of these pages here to be as simple as possible.

35
00:02:01,770 --> 00:02:06,030
‫So we don't want them to have any state or any effects.

36
00:02:06,030 --> 00:02:07,950
‫So in our cabin's folder

37
00:02:07,950 --> 00:02:12,363
‫let's just create a component called AddCabin.

38
00:02:16,560 --> 00:02:19,593
‫And so this is where we will then call the modal.

39
00:02:20,520 --> 00:02:24,693
‫So let's see if we can use some of this right there.

40
00:02:27,060 --> 00:02:31,180
‫So maybe let's grab all of this here, place that here.

41
00:02:35,700 --> 00:02:39,063
‫Also the state, even though we are going to change the name.

42
00:02:42,240 --> 00:02:47,050
‫And yeah, then here, let's get rid of all of this

43
00:02:48,540 --> 00:02:53,540
‫and here simply render that AddCabin component.

44
00:02:57,000 --> 00:03:00,783
‫So let's get rid of all of these unnecessary imports.

45
00:03:02,430 --> 00:03:05,700
‫And so this is a lot cleaner.

46
00:03:05,700 --> 00:03:09,270
‫And then of course we need to correct all the stuff here.

47
00:03:09,270 --> 00:03:14,130
‫So importing the state, the button

48
00:03:14,130 --> 00:03:18,003
‫and then also deform itself.

49
00:03:19,650 --> 00:03:23,730
‫All right, and now I just want to change this name here

50
00:03:23,730 --> 00:03:27,303
‫from showForm to isOpenModal.

51
00:03:28,200 --> 00:03:33,200
‫So isOpenModal and just like this.

52
00:03:38,640 --> 00:03:43,290
‫And for now here, whenever the modal is open

53
00:03:43,290 --> 00:03:45,543
‫let's just show that modal.

54
00:03:46,980 --> 00:03:49,983
‫So what we just worked on later.

55
00:03:51,240 --> 00:03:54,960
‫So let's re-render this.

56
00:03:54,960 --> 00:03:57,390
‫And so now let's see what happens.

57
00:03:57,390 --> 00:04:00,750
‫And indeed there is or modal window,

58
00:04:00,750 --> 00:04:04,620
‫but of course, now we want to make this a bit more reusable.

59
00:04:04,620 --> 00:04:07,380
‫And so we will allow this modal window

60
00:04:07,380 --> 00:04:10,050
‫to receive some custom content.

61
00:04:10,050 --> 00:04:13,290
‫And so that content is, as you can imagine,

62
00:04:13,290 --> 00:04:15,843
‫going to be the CreateCabinForm.

63
00:04:17,250 --> 00:04:20,010
‫So for that, we will just pass this in.

64
00:04:20,010 --> 00:04:23,640
‫And then inside the modal we will use the children prop

65
00:04:23,640 --> 00:04:25,473
‫to receive this form.

66
00:04:26,820 --> 00:04:30,150
‫So here it's actually Modal.

67
00:04:30,150 --> 00:04:33,213
‫And here this should be self-closing.

68
00:04:35,220 --> 00:04:36,480
‫All right.

69
00:04:36,480 --> 00:04:39,570
‫And of course, that doesn't change anything here

70
00:04:39,570 --> 00:04:43,170
‫because now we need to go over the modal

71
00:04:43,170 --> 00:04:47,250
‫and accept the children prop

72
00:04:47,250 --> 00:04:49,263
‫and then display that right here.

73
00:04:50,670 --> 00:04:52,590
‫Now we don't know what kind of element

74
00:04:52,590 --> 00:04:54,300
‫we are going to get here.

75
00:04:54,300 --> 00:04:58,380
‫And so let's actually wrap whatever children

76
00:04:58,380 --> 00:05:02,010
‫that we receive here, which we don't know what they are,

77
00:05:02,010 --> 00:05:04,413
‫inside a div like this.

78
00:05:06,540 --> 00:05:10,920
‫And so this is starting to look like something here.

79
00:05:10,920 --> 00:05:14,523
‫The styling is maybe a bit off, but we will fix that later.

80
00:05:16,050 --> 00:05:19,890
‫So what matters is that this modal is actually

81
00:05:19,890 --> 00:05:22,710
‫already nicely centered on our page.

82
00:05:22,710 --> 00:05:27,710
‫And so that's because of this fixed position right here

83
00:05:27,900 --> 00:05:30,720
‫and then this top, left and transform.

84
00:05:30,720 --> 00:05:34,140
‫But now let's also use this overlay component here

85
00:05:34,140 --> 00:05:37,260
‫which will add a subtle background color

86
00:05:37,260 --> 00:05:40,290
‫and will make the background blurred.

87
00:05:40,290 --> 00:05:45,290
‫So that will give the whole thing a bit of a nicer look.

88
00:05:45,600 --> 00:05:49,683
‫So, Overlay like this.

89
00:05:52,020 --> 00:05:54,090
‫And beautiful.

90
00:05:54,090 --> 00:05:57,960
‫Next up, we also need a way of closing the modal.

91
00:05:57,960 --> 00:06:02,010
‫So that's a pretty common functionality, right?

92
00:06:02,010 --> 00:06:05,160
‫And so we need to add a button here.

93
00:06:05,160 --> 00:06:08,610
‫And again, we already have that button here.

94
00:06:08,610 --> 00:06:13,483
‫And so let's just use it here also inside the StyledModal.

95
00:06:16,410 --> 00:06:18,210
‫So, Button.

96
00:06:18,210 --> 00:06:23,043
‫And then here, let's use, again, an icon from our library.

97
00:06:24,330 --> 00:06:27,243
‫So this one right here.

98
00:06:28,560 --> 00:06:29,910
‫And so there it is.

99
00:06:29,910 --> 00:06:32,670
‫But of course, now as we click here

100
00:06:32,670 --> 00:06:34,830
‫nothing is going to happen.

101
00:06:34,830 --> 00:06:36,270
‫And the reason for that

102
00:06:36,270 --> 00:06:41,220
‫is that we don't really know how to close this modal, right?

103
00:06:41,220 --> 00:06:43,710
‫So we didn't pass any prop in here

104
00:06:43,710 --> 00:06:45,603
‫and therefore nothing happens.

105
00:06:46,650 --> 00:06:50,730
‫So how can we actually close this modal?

106
00:06:50,730 --> 00:06:54,540
‫Well, remember that the modal is being opened

107
00:06:54,540 --> 00:06:58,050
‫because of this external state right here.

108
00:06:58,050 --> 00:07:00,540
‫So this state that is actually living

109
00:07:00,540 --> 00:07:03,690
‫outside of the modal, right?

110
00:07:03,690 --> 00:07:06,420
‫So whenever this here is true

111
00:07:06,420 --> 00:07:11,010
‫then the modal will be rendered, but if not, then not.

112
00:07:11,010 --> 00:07:13,470
‫And so in order to close the modal,

113
00:07:13,470 --> 00:07:15,930
‫we basically now need to pass in

114
00:07:15,930 --> 00:07:19,290
‫this setIsOpenModal function

115
00:07:19,290 --> 00:07:22,473
‫or at least some function that depends on that.

116
00:07:25,290 --> 00:07:29,293
‫So let's pass in then the onClose prop

117
00:07:31,350 --> 00:07:34,890
‫which will be dysfunction that I just mentioned.

118
00:07:34,890 --> 00:07:38,640
‫So let's create a callback function here

119
00:07:38,640 --> 00:07:43,640
‫which will setIsOpenModal to false, right?

120
00:07:46,410 --> 00:07:47,970
‫So by calling this function

121
00:07:47,970 --> 00:07:51,210
‫this will then set the state back to false

122
00:07:51,210 --> 00:07:53,073
‫and the modal will close.

123
00:07:54,240 --> 00:07:57,423
‫So let's accept that prop here. onClose.

124
00:07:59,010 --> 00:08:01,890
‫And then here we just need to wire that up

125
00:08:01,890 --> 00:08:04,473
‫with the onClick event handler.

126
00:08:06,030 --> 00:08:10,623
‫So, onClose and there we go.

127
00:08:11,550 --> 00:08:13,650
‫Let's open it up again

128
00:08:13,650 --> 00:08:16,380
‫because we also want the same functionality

129
00:08:16,380 --> 00:08:20,190
‫whenever we click here on this cancel button.

130
00:08:20,190 --> 00:08:23,130
‫So that also makes sense to close the modal

131
00:08:23,130 --> 00:08:25,890
‫and it would even make sense to close it

132
00:08:25,890 --> 00:08:29,100
‫whenever the new cabin has been created.

133
00:08:29,100 --> 00:08:30,930
‫So that's something pretty usual

134
00:08:30,930 --> 00:08:33,420
‫that you see in web applications.

135
00:08:33,420 --> 00:08:37,050
‫And so let's try to do something similar.

136
00:08:37,050 --> 00:08:41,490
‫And for that, we have to do exactly what we did earlier

137
00:08:41,490 --> 00:08:45,090
‫which is to also pass in a prop here

138
00:08:45,090 --> 00:08:48,930
‫with this same function, right?

139
00:08:48,930 --> 00:08:52,060
‫Because otherwise the form has no way of knowing

140
00:08:52,920 --> 00:08:55,680
‫how to actually close the modal.

141
00:08:55,680 --> 00:08:59,617
‫Now here, let's even call this prop onCloseModal.

142
00:09:00,596 --> 00:09:02,460
‫So to be a bit more specific.

143
00:09:02,460 --> 00:09:07,460
‫And then let's come here and then let's accept that prop.

144
00:09:08,400 --> 00:09:10,683
‫So, onCloseModal.

145
00:09:11,940 --> 00:09:15,780
‫And then basically what we want to do...

146
00:09:15,780 --> 00:09:20,460
‫Well, first of all, here on the reset button...

147
00:09:20,460 --> 00:09:25,267
‫So this cancel button, let's add the onClick prop.

148
00:09:27,510 --> 00:09:31,203
‫And then here we could just use onCloseModal.

149
00:09:32,550 --> 00:09:34,320
‫However, we do not know

150
00:09:34,320 --> 00:09:38,040
‫whether this form will ever be reused in another place,

151
00:09:38,040 --> 00:09:40,200
‫not inside the modal.

152
00:09:40,200 --> 00:09:42,810
‫And so if this form is ever used

153
00:09:42,810 --> 00:09:46,380
‫in some place where it isn't contained in a modal

154
00:09:46,380 --> 00:09:48,270
‫then it's not going to receive

155
00:09:48,270 --> 00:09:51,510
‫this onCloseModal prop, right?

156
00:09:51,510 --> 00:09:52,560
‫And so that means

157
00:09:52,560 --> 00:09:55,830
‫that we need to call this function here conditionally

158
00:09:55,830 --> 00:09:58,650
‫because again, it might not even exist.

159
00:09:58,650 --> 00:10:01,680
‫And so in that case, if it doesn't exist,

160
00:10:01,680 --> 00:10:03,213
‫then this will create a bug.

161
00:10:04,260 --> 00:10:07,680
‫So let's actually create a callback here

162
00:10:07,680 --> 00:10:10,380
‫and then we can conditionally call a function

163
00:10:10,380 --> 00:10:13,470
‫with the optional chaining operator.

164
00:10:13,470 --> 00:10:15,630
‫So that's really convenient.

165
00:10:15,630 --> 00:10:18,360
‫And so if this is undefined

166
00:10:18,360 --> 00:10:20,820
‫then the function will not get called

167
00:10:20,820 --> 00:10:24,093
‫because of this optional chaining operator.

168
00:10:25,530 --> 00:10:28,590
‫All right, now let's copy this

169
00:10:28,590 --> 00:10:33,153
‫and then do the exact same thing also right here.

170
00:10:34,170 --> 00:10:39,150
‫So onSuccess, so after the cabin has been created

171
00:10:39,150 --> 00:10:41,670
‫or after it has been edited,

172
00:10:41,670 --> 00:10:45,120
‫then let's also close the modal.

173
00:10:45,120 --> 00:10:47,760
‫So let's try that with this button.

174
00:10:47,760 --> 00:10:50,940
‫And nice. So that works.

175
00:10:50,940 --> 00:10:53,430
‫And I'm not gonna try creating a new cabin

176
00:10:53,430 --> 00:10:56,190
‫because that's not really necessary.

177
00:10:56,190 --> 00:10:59,880
‫Now, since we are already in this form component

178
00:10:59,880 --> 00:11:03,300
‫let's quickly fix the styling as well.

179
00:11:03,300 --> 00:11:05,760
‫So here we basically want to get rid

180
00:11:05,760 --> 00:11:08,370
‫of all the space right here

181
00:11:08,370 --> 00:11:11,703
‫in case that the form is rendered in a modal.

182
00:11:13,320 --> 00:11:18,320
‫So let's come here to the form and then add a prop here.

183
00:11:21,630 --> 00:11:25,290
‫So then in our styled component, we will receive this prop

184
00:11:25,290 --> 00:11:27,423
‫and change the styling accordingly.

185
00:11:28,380 --> 00:11:30,090
‫Now, the way in which we know

186
00:11:30,090 --> 00:11:33,450
‫whether this form is being rendered in a modal

187
00:11:33,450 --> 00:11:37,470
‫is if it received the onCloseModal prop.

188
00:11:37,470 --> 00:11:41,400
‫So that's a nice way or a nice trick of checking that.

189
00:11:41,400 --> 00:11:43,567
‫And so let's do onCloseModal.

190
00:11:44,880 --> 00:11:49,880
‫If it exists, then here we want to create the modal prop.

191
00:11:52,170 --> 00:11:54,660
‫So set the type prop to modal.

192
00:11:54,660 --> 00:11:58,503
‫And otherwise, let's just call it regular.

193
00:11:59,820 --> 00:12:04,820
‫All right, and so now let's check here for these two props.

194
00:12:05,340 --> 00:12:07,413
‫So modal and regular.

195
00:12:08,250 --> 00:12:10,660
‫So let's go to our form component

196
00:12:11,640 --> 00:12:15,090
‫and that, again, works by hitting the Command

197
00:12:15,090 --> 00:12:18,873
‫or the Control key at the same time as clicking.

198
00:12:19,860 --> 00:12:23,610
‫Now here, we actually already have the code

199
00:12:23,610 --> 00:12:25,173
‫for using those props.

200
00:12:26,070 --> 00:12:30,510
‫So if the form type is modal, then it will get this styling

201
00:12:30,510 --> 00:12:33,960
‫and otherwise it will get this styling.

202
00:12:33,960 --> 00:12:36,750
‫But here, let's actually be a bit more explicit

203
00:12:36,750 --> 00:12:38,943
‫and check for the regular type.

204
00:12:40,470 --> 00:12:45,030
‫So the regular prop that we specified earlier as well.

205
00:12:45,030 --> 00:12:47,343
‫And then let's make that the default prop.

206
00:12:48,600 --> 00:12:50,493
‫So, Form.defaultProps.

207
00:12:52,590 --> 00:12:55,350
‫So just like we did earlier.

208
00:12:55,350 --> 00:13:00,350
‫So the type by default should of course be regular.

209
00:13:01,800 --> 00:13:04,980
‫All right, so let's check this.

210
00:13:04,980 --> 00:13:06,930
‫And beautiful.

211
00:13:06,930 --> 00:13:09,330
‫So this looks a lot better than before

212
00:13:09,330 --> 00:13:12,990
‫and it works just nicely.

213
00:13:12,990 --> 00:13:16,110
‫However, there is still one important improvement

214
00:13:16,110 --> 00:13:18,150
‫that we need to do.

215
00:13:18,150 --> 00:13:23,150
‫So we can close all of this. All of this now works nicely.

216
00:13:23,580 --> 00:13:27,450
‫But yeah, as I was saying, let's now improve this here

217
00:13:27,450 --> 00:13:31,020
‫using something called a React portal.

218
00:13:31,020 --> 00:13:33,990
‫So a React portal is a feature

219
00:13:33,990 --> 00:13:37,770
‫that essentially allows us to render an element

220
00:13:37,770 --> 00:13:41,790
‫outside of the parent component's DOM structure

221
00:13:41,790 --> 00:13:46,140
‫while still keeping the element in the original position

222
00:13:46,140 --> 00:13:48,300
‫of the component tree.

223
00:13:48,300 --> 00:13:51,030
‫So in other words, with a portal

224
00:13:51,030 --> 00:13:53,520
‫we can basically render a component

225
00:13:53,520 --> 00:13:57,390
‫in any place that we want inside the DOM tree

226
00:13:57,390 --> 00:13:59,610
‫but still leave the component

227
00:13:59,610 --> 00:14:03,060
‫at the same place in the React component tree.

228
00:14:03,060 --> 00:14:07,320
‫And so then things like props keep working normally.

229
00:14:07,320 --> 00:14:12,000
‫And so this is great and generally used for all elements

230
00:14:12,000 --> 00:14:15,870
‫that we want to stay on top of other elements.

231
00:14:15,870 --> 00:14:20,870
‫So things like modal windows, tool tips, menus and so on.

232
00:14:21,840 --> 00:14:25,320
‫And since we are building a modal right now

233
00:14:25,320 --> 00:14:29,013
‫I thought it was a good idea to show you this feature.

234
00:14:30,060 --> 00:14:31,470
‫So before we start

235
00:14:31,470 --> 00:14:35,850
‫let's actually take a look at the current situation.

236
00:14:35,850 --> 00:14:39,333
‫So when we open the modal, let's inspect this.

237
00:14:41,190 --> 00:14:45,470
‫And so here in our DOM tree...

238
00:14:47,130 --> 00:14:49,263
‫Well, where is it actually?

239
00:14:53,280 --> 00:14:55,260
‫And yeah, this is the one.

240
00:14:55,260 --> 00:14:58,680
‫So this is basically our modal window.

241
00:14:58,680 --> 00:15:00,390
‫And of course right now

242
00:15:00,390 --> 00:15:05,190
‫it is simply inside the DOM structure of our page.

243
00:15:05,190 --> 00:15:07,200
‫So we have our main

244
00:15:07,200 --> 00:15:09,960
‫and then in there this is probably the table

245
00:15:09,960 --> 00:15:12,360
‫and then these are all the rows.

246
00:15:12,360 --> 00:15:16,380
‫And yeah, then after that comes our modal.

247
00:15:16,380 --> 00:15:20,460
‫But now with a React portal, as I was just saying

248
00:15:20,460 --> 00:15:23,250
‫we can basically render this component

249
00:15:23,250 --> 00:15:26,580
‫completely outside of this DOM structure

250
00:15:26,580 --> 00:15:29,940
‫and really render it anywhere that we want.

251
00:15:29,940 --> 00:15:32,130
‫So let me quickly show you how.

252
00:15:32,130 --> 00:15:34,620
‫So it's actually really easy.

253
00:15:34,620 --> 00:15:38,100
‫So instead of just returning this JSX here

254
00:15:38,100 --> 00:15:41,613
‫we return the results of calling createPortal.

255
00:15:43,414 --> 00:15:44,831
‫So, createPortal.

256
00:15:46,410 --> 00:15:49,560
‫And this one is actually not part of React

257
00:15:49,560 --> 00:15:54,210
‫but of React DOM, which actually makes sense

258
00:15:54,210 --> 00:15:59,210
‫because this really is about placing some JSX in the DOM.

259
00:15:59,340 --> 00:16:03,000
‫Now then this function here receives as the first argument

260
00:16:03,000 --> 00:16:05,790
‫the JSX that we want to render.

261
00:16:05,790 --> 00:16:08,160
‫And then as the second argument,

262
00:16:08,160 --> 00:16:12,540
‫a DOM note where we want to render this JSX.

263
00:16:12,540 --> 00:16:16,860
‫And so let's just do this in the document body.

264
00:16:16,860 --> 00:16:18,540
‫And so that we can select

265
00:16:18,540 --> 00:16:23,540
‫simply by writing document.body.

266
00:16:25,606 --> 00:16:26,523
‫All right.

267
00:16:27,720 --> 00:16:31,980
‫But it could of course be also any other element as well

268
00:16:31,980 --> 00:16:34,650
‫and we could select it, for example,

269
00:16:34,650 --> 00:16:39,600
‫using document.querySelector or any other way.

270
00:16:39,600 --> 00:16:43,830
‫But anyway, let's now go back to just attaching this

271
00:16:43,830 --> 00:16:45,450
‫to the document body,

272
00:16:45,450 --> 00:16:49,440
‫even though some developers say that this is not ideal,

273
00:16:49,440 --> 00:16:52,383
‫but actually it does work just fine.

274
00:16:53,640 --> 00:16:58,640
‫So let's just reload here, then let's open the form.

275
00:17:00,600 --> 00:17:03,420
‫And now notice how the modal window

276
00:17:03,420 --> 00:17:07,950
‫is actually a direct child element of the body element.

277
00:17:07,950 --> 00:17:12,420
‫And so that's because we selected that body right here.

278
00:17:12,420 --> 00:17:13,950
‫And so the reason for that

279
00:17:13,950 --> 00:17:17,160
‫is that here we selected that body element

280
00:17:17,160 --> 00:17:20,973
‫to be the parent element of whatever we want to render.

281
00:17:22,650 --> 00:17:23,483
‫All right.

282
00:17:24,510 --> 00:17:28,260
‫And so this now essentially lives completely outside

283
00:17:28,260 --> 00:17:31,770
‫of the DOM structure of the application itself,

284
00:17:31,770 --> 00:17:35,703
‫which lives right here inside this root div.

285
00:17:36,780 --> 00:17:39,720
‫Now, what's nice about this, as I was saying,

286
00:17:39,720 --> 00:17:42,480
‫is that inside the component tree

287
00:17:42,480 --> 00:17:45,630
‫the modal is still at the exact same place.

288
00:17:45,630 --> 00:17:49,320
‫And so that's why we can still pass all the props into it

289
00:17:49,320 --> 00:17:50,760
‫that we want.

290
00:17:50,760 --> 00:17:55,320
‫So it's still a child element here off AddCabin

291
00:17:55,320 --> 00:17:58,860
‫even though in the DOM it no longer is.

292
00:17:58,860 --> 00:18:02,610
‫So this portal basically is called a portal

293
00:18:02,610 --> 00:18:07,380
‫because it allows us to create an invisible tunnel,

294
00:18:07,380 --> 00:18:08,970
‫so like a portal,

295
00:18:08,970 --> 00:18:13,410
‫from the place where the component is in the component tree

296
00:18:13,410 --> 00:18:16,710
‫to another place in the DOM tree.

297
00:18:16,710 --> 00:18:19,020
‫But now you might be wondering,

298
00:18:19,020 --> 00:18:22,200
‫this worked really great already in the beginning

299
00:18:22,200 --> 00:18:26,730
‫with just regular CSS positioning, so without the portal.

300
00:18:26,730 --> 00:18:30,540
‫And so why do we even need to use this portal?

301
00:18:30,540 --> 00:18:34,320
‫Well, the main reason why a portal becomes necessary

302
00:18:34,320 --> 00:18:36,390
‫is in order to avoid conflicts

303
00:18:36,390 --> 00:18:41,220
‫with the CSS property overflow set to hidden.

304
00:18:41,220 --> 00:18:44,910
‫So many times we build a component like a modal

305
00:18:44,910 --> 00:18:46,890
‫and it works just fine,

306
00:18:46,890 --> 00:18:50,790
‫but then some other developer will reuse it somewhere else

307
00:18:50,790 --> 00:18:53,730
‫and that somewhere else might be a place

308
00:18:53,730 --> 00:18:56,190
‫where the modal will get cut off

309
00:18:56,190 --> 00:19:00,180
‫by a overflow hidden set on the parent.

310
00:19:00,180 --> 00:19:03,420
‫So this is basically all about reusability

311
00:19:03,420 --> 00:19:07,500
‫and making sure that the component will never be cut off

312
00:19:07,500 --> 00:19:11,100
‫by an overflow property set to hidden

313
00:19:11,100 --> 00:19:13,500
‫on some parent element.

314
00:19:13,500 --> 00:19:16,920
‫So in order to avoid this kind of situation

315
00:19:16,920 --> 00:19:20,310
‫we simply render the modal completely outside

316
00:19:20,310 --> 00:19:22,080
‫of the rest of the DOM.

317
00:19:22,080 --> 00:19:26,403
‫So basically on top of the DOM tree as we just did here.

318
00:19:27,510 --> 00:19:31,770
‫All right, so hopefully this made sense.

319
00:19:31,770 --> 00:19:36,720
‫And with this, we finished our first version of the modal.

320
00:19:36,720 --> 00:19:40,830
‫However, this modal does contain a few problems

321
00:19:40,830 --> 00:19:45,270
‫and most importantly, the way in which we open the modal.

322
00:19:45,270 --> 00:19:47,460
‫And so that's why in the next lecture

323
00:19:47,460 --> 00:19:51,063
‫we will actually convert this to a compound component.