1 00:00:01,140 --> 00:00:04,080 ‫So let's convert the first version 2 00:00:04,080 --> 00:00:07,050 ‫of the modal component that we just built 3 00:00:07,050 --> 00:00:09,543 ‫to a compound component. 4 00:00:11,010 --> 00:00:13,800 ‫And the reason why that is necessary 5 00:00:13,800 --> 00:00:18,270 ‫is that this modal that we have built is really not ideal 6 00:00:18,270 --> 00:00:20,790 ‫when it comes to the state management 7 00:00:20,790 --> 00:00:25,790 ‫and to the way in which we actually render this modal. 8 00:00:25,830 --> 00:00:29,520 ‫So remember how we render the modal right here 9 00:00:29,520 --> 00:00:33,090 ‫based on this isOpenModal state. 10 00:00:33,090 --> 00:00:37,320 ‫Now the problem with this is that we really do not want 11 00:00:37,320 --> 00:00:41,310 ‫the component who uses the modal to be responsible 12 00:00:41,310 --> 00:00:43,710 ‫for creating this piece of state 13 00:00:43,710 --> 00:00:48,660 ‫and to keep track of whether the modal is open or not. 14 00:00:48,660 --> 00:00:51,660 ‫So again, it shouldn't be the task 15 00:00:51,660 --> 00:00:55,140 ‫of the AddCabin component here to track 16 00:00:55,140 --> 00:00:59,790 ‫whether right now the modal should be displayed or not. 17 00:00:59,790 --> 00:01:04,620 ‫So instead, the modal component itself should actually know 18 00:01:04,620 --> 00:01:07,560 ‫whether it is currently open or not, 19 00:01:07,560 --> 00:01:11,280 ‫and so it should keep this state internally. 20 00:01:11,280 --> 00:01:15,150 ‫So it should track this basically encapsulated 21 00:01:15,150 --> 00:01:17,100 ‫inside the component. 22 00:01:17,100 --> 00:01:21,210 ‫And then the component should give us simply a way 23 00:01:21,210 --> 00:01:25,860 ‫to open the modal and also a way to pass in the content 24 00:01:25,860 --> 00:01:29,880 ‫that we actually want to display inside the modal. 25 00:01:29,880 --> 00:01:33,360 ‫So basically we want some button to open the modal, 26 00:01:33,360 --> 00:01:35,700 ‫and we want the window itself. 27 00:01:35,700 --> 00:01:39,090 ‫So these two components together should form 28 00:01:39,090 --> 00:01:40,650 ‫the modal component. 29 00:01:40,650 --> 00:01:43,050 ‫And if this sounds a lot like 30 00:01:43,050 --> 00:01:47,580 ‫the compound component pattern, that is because, in fact, 31 00:01:47,580 --> 00:01:52,580 ‫a compound component is perfect for a situation like this. 32 00:01:53,070 --> 00:01:56,340 ‫And so we will now, as I just mentioned, 33 00:01:56,340 --> 00:02:00,213 ‫implement this whole modal using a compound component. 34 00:02:01,380 --> 00:02:04,500 ‫So let's comment all of this out 35 00:02:04,500 --> 00:02:08,850 ‫so that we still keep that code as a reference. 36 00:02:08,850 --> 00:02:13,850 ‫And so let's create a new component here. 37 00:02:13,890 --> 00:02:18,300 ‫And then let's start by basically creating the API 38 00:02:18,300 --> 00:02:20,040 ‫of this component. 39 00:02:20,040 --> 00:02:23,583 ‫And so then we will know what we should actually implement. 40 00:02:24,780 --> 00:02:28,800 ‫So we want, again, a modal component, 41 00:02:28,800 --> 00:02:30,480 ‫so just like before. 42 00:02:30,480 --> 00:02:34,770 ‫And then in there, let's say we want that button, 43 00:02:34,770 --> 00:02:36,633 ‫and a button to open this. 44 00:02:37,530 --> 00:02:41,820 ‫So Modal Open, and then the window itself. 45 00:02:41,820 --> 00:02:46,590 ‫So let's call this one Modal.Open. 46 00:02:46,590 --> 00:02:48,900 ‫And so it's gonna be into this window 47 00:02:48,900 --> 00:02:53,340 ‫where we are going to place the content itself. 48 00:02:53,340 --> 00:02:56,207 ‫So in this case, that's CreateCabinForm. 49 00:02:57,630 --> 00:03:00,780 ‫And then here into this Modal.Open, 50 00:03:00,780 --> 00:03:03,180 ‫we want the user of this component 51 00:03:03,180 --> 00:03:06,033 ‫to be able to pass in the button itself. 52 00:03:07,020 --> 00:03:11,610 ‫So of course we could make this Open itself also a button, 53 00:03:11,610 --> 00:03:14,760 ‫but then we would lose a bit of the flexibility 54 00:03:14,760 --> 00:03:17,490 ‫of the component, 'cause then we would have to define 55 00:03:17,490 --> 00:03:19,710 ‫the style and so on. 56 00:03:19,710 --> 00:03:23,730 ‫And so instead, let's allow the user to pass in 57 00:03:23,730 --> 00:03:25,830 ‫whatever button they want. 58 00:03:25,830 --> 00:03:29,007 ‫And so let's again use our primary button here, 59 00:03:29,007 --> 00:03:32,793 ‫and then Add new cabin. 60 00:03:33,900 --> 00:03:37,170 ‫All right, now of course, this will create some errors 61 00:03:37,170 --> 00:03:40,320 ‫because we didn't implement any of this yet, 62 00:03:40,320 --> 00:03:42,723 ‫but, well, let's just keep going. 63 00:03:43,590 --> 00:03:47,550 ‫So this is already looking like a real nice API. 64 00:03:47,550 --> 00:03:51,150 ‫And if you ask me, a lot nicer 65 00:03:51,150 --> 00:03:53,760 ‫than what we actually have here. 66 00:03:53,760 --> 00:03:57,600 ‫So now we have no more state needed here 67 00:03:57,600 --> 00:04:00,330 ‫inside this AddCabin component. 68 00:04:00,330 --> 00:04:02,730 ‫And instead we will keep that state 69 00:04:02,730 --> 00:04:07,730 ‫whether the window is open or not right inside the modal. 70 00:04:07,830 --> 00:04:11,490 ‫Now just one more thing, which is that we actually want 71 00:04:11,490 --> 00:04:13,503 ‫to allow multiple windows. 72 00:04:14,610 --> 00:04:19,610 ‫So let's say, for example, we also want one to show a table. 73 00:04:20,430 --> 00:04:22,293 ‫So we can then do this. 74 00:04:23,220 --> 00:04:27,360 ‫So we have another button to open and another window. 75 00:04:27,360 --> 00:04:30,270 ‫So we want the user of the modal component 76 00:04:30,270 --> 00:04:32,310 ‫to be able to do this, 77 00:04:32,310 --> 00:04:36,030 ‫so basically having multiple modal windows. 78 00:04:36,030 --> 00:04:38,790 ‫However, of course, only one of them 79 00:04:38,790 --> 00:04:41,040 ‫can be open at the same time. 80 00:04:41,040 --> 00:04:44,010 ‫And so therefore each of these buttons 81 00:04:44,010 --> 00:04:47,820 ‫needs to know which window it should actually open. 82 00:04:47,820 --> 00:04:52,353 ‫And so therefore here, let's pass an prop called opens. 83 00:04:53,520 --> 00:04:57,843 ‫And let's say this one opens the cabin form. 84 00:04:59,190 --> 00:05:01,870 ‫And so then we simply give this window here 85 00:05:03,210 --> 00:05:04,920 ‫exactly this name. 86 00:05:04,920 --> 00:05:07,590 ‫So let's give this one the name prop 87 00:05:07,590 --> 00:05:10,413 ‫and then call it cabin form. 88 00:05:11,640 --> 00:05:15,390 ‫All right, and then here, well, 89 00:05:15,390 --> 00:05:18,180 ‫let's already pass in some different prop here. 90 00:05:18,180 --> 00:05:23,180 ‫Let's say table, and then we call this window here table. 91 00:05:26,040 --> 00:05:29,760 ‫Alright, and then here, well, let's do this later. 92 00:05:29,760 --> 00:05:32,430 ‫So let's comment this one out for now. 93 00:05:32,430 --> 00:05:34,170 ‫So this was just to show you 94 00:05:34,170 --> 00:05:36,480 ‫that we can have multiple windows 95 00:05:36,480 --> 00:05:38,970 ‫inside the same modal component. 96 00:05:38,970 --> 00:05:42,750 ‫And so since we have that additional flexibility, 97 00:05:42,750 --> 00:05:45,420 ‫then we need to give each window a name. 98 00:05:45,420 --> 00:05:49,170 ‫And then we associate each open component here 99 00:05:49,170 --> 00:05:52,110 ‫to that name now. 100 00:05:52,110 --> 00:05:55,110 ‫All right, and as we also just mentioned, 101 00:05:55,110 --> 00:05:57,750 ‫then the modal basically needs to keep track 102 00:05:57,750 --> 00:06:00,180 ‫which one is currently open. 103 00:06:00,180 --> 00:06:05,180 ‫And so let's now go implement all of this here in our modal. 104 00:06:05,310 --> 00:06:08,010 ‫And let's duplicate this file first, 105 00:06:08,010 --> 00:06:10,743 ‫so that you can also keep the original one. 106 00:06:12,750 --> 00:06:15,510 ‫And then let's go here. 107 00:06:15,510 --> 00:06:17,250 ‫And so now we are going to follow 108 00:06:17,250 --> 00:06:19,980 ‫the same four steps that we did previously 109 00:06:19,980 --> 00:06:23,310 ‫in order to implement a compound component. 110 00:06:23,310 --> 00:06:26,343 ‫And the first one is to create a new context. 111 00:06:27,990 --> 00:06:31,050 ‫So ModalContext, 112 00:06:31,050 --> 00:06:36,050 ‫let's say createContext from React. 113 00:06:36,600 --> 00:06:39,000 ‫And so that is the first step. 114 00:06:39,000 --> 00:06:42,570 ‫Then next step is to create the parent component. 115 00:06:42,570 --> 00:06:44,043 ‫So that's what we have here. 116 00:06:44,970 --> 00:06:46,950 ‫So that's already called Modal, 117 00:06:46,950 --> 00:06:50,490 ‫but let's actually call it here Window, 118 00:06:50,490 --> 00:06:54,270 ‫'cause the window is what will actually contain this portal 119 00:06:54,270 --> 00:06:56,313 ‫and all this JSX here. 120 00:06:58,200 --> 00:07:03,200 ‫All right, and so then let's create the parent component, 121 00:07:03,690 --> 00:07:06,300 ‫which is the modal itself. 122 00:07:06,300 --> 00:07:09,300 ‫And this one also needs to accept children 123 00:07:09,300 --> 00:07:13,083 ‫so that then it can display the Windows and the Opens. 124 00:07:15,024 --> 00:07:18,390 ‫Now, okay, and then here is where we will keep track 125 00:07:18,390 --> 00:07:21,063 ‫of which is the currently open window. 126 00:07:22,110 --> 00:07:24,633 ‫So let's call that the openName and setOpenName. 127 00:07:28,560 --> 00:07:32,730 ‫So then of course we use a useState hook for that, 128 00:07:32,730 --> 00:07:35,940 ‫and we start with no empty window, 129 00:07:35,940 --> 00:07:39,450 ‫and therefore we just use as a default here 130 00:07:39,450 --> 00:07:40,563 ‫an empty string. 131 00:07:41,790 --> 00:07:44,580 ‫Then next, let's also immediately create 132 00:07:44,580 --> 00:07:45,903 ‫the handler functions. 133 00:07:46,740 --> 00:07:50,553 ‫So let's say close is equal. 134 00:07:51,720 --> 00:07:55,020 ‫So closing a modal or a modal window 135 00:07:55,020 --> 00:07:58,650 ‫is as easy as simply setting the openName 136 00:07:58,650 --> 00:08:01,560 ‫back to the empty string. 137 00:08:01,560 --> 00:08:05,700 ‫So this function all it will do is setOpenName 138 00:08:05,700 --> 00:08:07,233 ‫back to nothing. 139 00:08:08,430 --> 00:08:13,430 ‫And the opposite is to open a window. 140 00:08:13,590 --> 00:08:17,070 ‫And opening a window is just the same thing 141 00:08:17,070 --> 00:08:19,590 ‫as setting the openName. 142 00:08:19,590 --> 00:08:21,513 ‫So let's just rename that here. 143 00:08:22,830 --> 00:08:26,220 ‫So this is a bit more explicit what is happening, 144 00:08:26,220 --> 00:08:31,220 ‫but basically opening is simply setting this openName 145 00:08:31,380 --> 00:08:34,440 ‫for example, to cabin form. 146 00:08:34,440 --> 00:08:37,680 ‫And so then this window that has this name 147 00:08:37,680 --> 00:08:39,123 ‫will be displayed. 148 00:08:41,130 --> 00:08:46,130 ‫All right, and so we already have that window. 149 00:08:46,230 --> 00:08:49,350 ‫Let's create the button itself, 150 00:08:49,350 --> 00:08:50,613 ‫or actually the Open. 151 00:08:52,920 --> 00:08:56,250 ‫So this accepts the children, and as we we saw earlier, 152 00:08:56,250 --> 00:09:01,250 ‫also the Opens prop while this one accepts the name prop. 153 00:09:02,820 --> 00:09:05,643 ‫And the onClose we will remove in a minute. 154 00:09:08,850 --> 00:09:11,820 ‫All right, and before we keep going, 155 00:09:11,820 --> 00:09:14,220 ‫let's implement the last step as well, 156 00:09:14,220 --> 00:09:18,570 ‫which is to place these two S properties on the modal. 157 00:09:18,570 --> 00:09:22,050 ‫So Modal.Open is Open, 158 00:09:22,050 --> 00:09:27,047 ‫and then Modal.Window is just Window. 159 00:09:29,190 --> 00:09:33,663 ‫All right, and so now let's get to work implementing these. 160 00:09:35,070 --> 00:09:37,650 ‫So first of all, in the Open component, 161 00:09:37,650 --> 00:09:42,650 ‫we will need access to the open function from the context. 162 00:09:43,290 --> 00:09:46,237 ‫So useContext with ModalContext. 163 00:09:47,310 --> 00:09:50,730 ‫And so now here we want to then return 164 00:09:50,730 --> 00:09:54,600 ‫whatever we pass in here, right? 165 00:09:54,600 --> 00:09:58,320 ‫So in our example, we passed in this button. 166 00:09:58,320 --> 00:10:00,690 ‫And so then we want to return this button 167 00:10:00,690 --> 00:10:03,330 ‫from this open modal. 168 00:10:03,330 --> 00:10:07,860 ‫However, how do we now actually add the open event handler 169 00:10:07,860 --> 00:10:09,390 ‫to this button? 170 00:10:09,390 --> 00:10:12,120 ‫I mean, of course we cannot do it right here 171 00:10:12,120 --> 00:10:14,640 ‫because here we don't have access to any 172 00:10:14,640 --> 00:10:16,200 ‫of the internal state 173 00:10:16,200 --> 00:10:19,620 ‫and these state updating functions, right? 174 00:10:19,620 --> 00:10:21,720 ‫And that's actually the whole point 175 00:10:21,720 --> 00:10:24,450 ‫of having the API design like this. 176 00:10:24,450 --> 00:10:28,470 ‫So if we're having a component that we use in this way, 177 00:10:28,470 --> 00:10:31,230 ‫and so we need to solve this problem. 178 00:10:31,230 --> 00:10:34,680 ‫So again, what we need to do is now a way 179 00:10:34,680 --> 00:10:39,120 ‫of adding that open event handler to this button, 180 00:10:39,120 --> 00:10:42,270 ‫so to the children prop of open. 181 00:10:42,270 --> 00:10:46,800 ‫So basically adding this function here to the children. 182 00:10:46,800 --> 00:10:49,290 ‫And the way we can do this is by using 183 00:10:49,290 --> 00:10:52,983 ‫a pretty advanced React function called cloneElement. 184 00:10:54,060 --> 00:10:56,130 ‫And to learn more about this function, 185 00:10:56,130 --> 00:10:59,583 ‫let's actually head over to the React documentation. 186 00:11:00,510 --> 00:11:03,570 ‫So I think we haven't checked this out 187 00:11:03,570 --> 00:11:07,350 ‫since the beginning of this entire course, 188 00:11:07,350 --> 00:11:09,190 ‫but I think it's still interesting 189 00:11:10,080 --> 00:11:11,530 ‫to now look up this function. 190 00:11:12,960 --> 00:11:17,880 ‫So cloneElement. Let's wait for it here. 191 00:11:17,880 --> 00:11:19,560 ‫Seems like my internet connection 192 00:11:19,560 --> 00:11:22,140 ‫is pretty slow at the moment. 193 00:11:22,140 --> 00:11:24,060 ‫Ah, but here it is. 194 00:11:24,060 --> 00:11:27,690 ‫So first of all, here we see that cloneElement 195 00:11:27,690 --> 00:11:29,130 ‫is pretty uncommon. 196 00:11:29,130 --> 00:11:32,070 ‫And so one thing that's important to mention here 197 00:11:32,070 --> 00:11:34,800 ‫is that you should not overuse the technique 198 00:11:34,800 --> 00:11:37,230 ‫that we are going to implement here soon. 199 00:11:37,230 --> 00:11:41,550 ‫But anyway, this technique can still be pretty useful 200 00:11:41,550 --> 00:11:44,370 ‫because the clone elements basically allows us 201 00:11:44,370 --> 00:11:49,260 ‫to create a new React element based on another one. 202 00:11:49,260 --> 00:11:52,830 ‫So we in the element, and then we can pass in props, 203 00:11:52,830 --> 00:11:56,220 ‫which will solve our problem here in our case. 204 00:11:56,220 --> 00:11:58,620 ‫And it's the reason why we're going to use this. 205 00:11:59,760 --> 00:12:03,990 ‫So instead of children, we will clone the children. 206 00:12:03,990 --> 00:12:06,780 ‫So we will basically create a new version 207 00:12:06,780 --> 00:12:09,870 ‫of the children but with new props. 208 00:12:09,870 --> 00:12:14,870 ‫And so those props will contain the onClick prop. 209 00:12:15,720 --> 00:12:19,590 ‫And then this onClick prop will become a function 210 00:12:19,590 --> 00:12:23,463 ‫that actually opens a modal window. 211 00:12:24,990 --> 00:12:29,990 ‫So this function will then call open with the opens prop. 212 00:12:33,180 --> 00:12:35,670 ‫So let's actually maybe change this here 213 00:12:35,670 --> 00:12:37,323 ‫to make it a bit more explicit. 214 00:12:38,220 --> 00:12:39,857 ‫So opensWindowName. 215 00:12:46,860 --> 00:12:49,593 ‫All right, and this is actually it. 216 00:12:50,610 --> 00:12:54,840 ‫So since we cannot place that function directly here, 217 00:12:54,840 --> 00:12:57,090 ‫what we do is to clone it. 218 00:12:57,090 --> 00:13:00,450 ‫So we clone that button, and then, as props, 219 00:13:00,450 --> 00:13:03,660 ‫we pass in the onClick prop as always 220 00:13:03,660 --> 00:13:05,850 ‫when we need to handle an event. 221 00:13:05,850 --> 00:13:07,710 ‫And then the event handler function 222 00:13:07,710 --> 00:13:12,240 ‫is simply to open the window with this name, 223 00:13:12,240 --> 00:13:16,500 ‫so with the name that we have here as a prop. 224 00:13:16,500 --> 00:13:19,800 ‫So this case, the cabin form, right? 225 00:13:19,800 --> 00:13:23,010 ‫And so now on the window we basically need to check 226 00:13:23,010 --> 00:13:25,230 ‫which is the currently open window. 227 00:13:25,230 --> 00:13:27,660 ‫And if it's the same as this name, 228 00:13:27,660 --> 00:13:30,483 ‫then we want to render its content. 229 00:13:32,670 --> 00:13:37,110 ‫So let's just do that, so what I just explained. 230 00:13:37,110 --> 00:13:42,110 ‫So basically if the name here is different 231 00:13:43,440 --> 00:13:47,580 ‫from the openName, which we will soon get from the context, 232 00:13:47,580 --> 00:13:49,323 ‫then don't return anything. 233 00:13:50,850 --> 00:13:52,770 ‫Then just return null. 234 00:13:52,770 --> 00:13:57,360 ‫But if the name is equal to the currently open window, 235 00:13:57,360 --> 00:14:00,153 ‫then, well, then we return this. 236 00:14:01,620 --> 00:14:05,140 ‫All right, and so now let's grab the openName 237 00:14:06,240 --> 00:14:10,830 ‫and also the close function from the context. 238 00:14:10,830 --> 00:14:12,430 ‫So useContext with ModalContext, 239 00:14:15,750 --> 00:14:19,830 ‫and then we can finally get rid of this onClose prop 240 00:14:19,830 --> 00:14:23,100 ‫because, again, earlier this was actually coming 241 00:14:23,100 --> 00:14:24,513 ‫from the outside. 242 00:14:25,830 --> 00:14:29,430 ‫So the only way in which we would close a modal 243 00:14:29,430 --> 00:14:32,070 ‫would be here with this function. 244 00:14:32,070 --> 00:14:33,540 ‫And so that was necessary 245 00:14:33,540 --> 00:14:37,680 ‫because the state was living outside of the modal. 246 00:14:37,680 --> 00:14:39,870 ‫So using this function right here, 247 00:14:39,870 --> 00:14:42,393 ‫but since that is no longer the case now, 248 00:14:43,260 --> 00:14:45,450 ‫we, of course, no longer pass this in. 249 00:14:45,450 --> 00:14:49,770 ‫And instead we use our internal close function, 250 00:14:49,770 --> 00:14:52,470 ‫so the one that we get from the context. 251 00:14:52,470 --> 00:14:56,850 ‫And so I believe with this, we are actually done 252 00:14:56,850 --> 00:14:59,493 ‫at least with the basic functionality. 253 00:15:00,390 --> 00:15:04,230 ‫So let's check this here, reload. 254 00:15:04,230 --> 00:15:08,103 ‫And now for some reason, our button isn't there. 255 00:15:09,540 --> 00:15:12,720 ‫So ah, of course not. 256 00:15:12,720 --> 00:15:15,570 ‫So I forgot one of the most important parts, 257 00:15:15,570 --> 00:15:20,570 ‫which is to even return something from this modal component. 258 00:15:20,910 --> 00:15:23,040 ‫And so then of course all the children 259 00:15:23,040 --> 00:15:24,963 ‫couldn't even be shown here. 260 00:15:26,220 --> 00:15:31,220 ‫So of course we need now the ModalContext.Provider 261 00:15:31,860 --> 00:15:35,793 ‫with the value of the openName, 262 00:15:37,904 --> 00:15:41,640 ‫the close and the open functions. 263 00:15:41,640 --> 00:15:46,640 ‫And then in here we want to pass in and render the children. 264 00:15:47,160 --> 00:15:48,633 ‫And so there we go. 265 00:15:49,470 --> 00:15:50,970 ‫So let's close this. 266 00:15:50,970 --> 00:15:54,630 ‫And now as we click here, beautiful. 267 00:15:54,630 --> 00:15:56,790 ‫It does open our modal. 268 00:15:56,790 --> 00:15:59,760 ‫So it works exactly the same way as before, 269 00:15:59,760 --> 00:16:03,450 ‫but now we have this as a compound component. 270 00:16:03,450 --> 00:16:04,890 ‫Nice. 271 00:16:04,890 --> 00:16:08,790 ‫Now maybe you notice that the styling is again off. 272 00:16:08,790 --> 00:16:11,850 ‫And the reason for that is that the styling here 273 00:16:11,850 --> 00:16:14,970 ‫is only applied with the type of modal 274 00:16:14,970 --> 00:16:18,990 ‫when this component here receives a function. 275 00:16:18,990 --> 00:16:21,270 ‫So let's just quickly review that 276 00:16:21,270 --> 00:16:23,073 ‫because this is pretty important. 277 00:16:24,060 --> 00:16:28,020 ‫So it is this one right here. 278 00:16:28,020 --> 00:16:31,110 ‫And so remember that earlier we passed 279 00:16:31,110 --> 00:16:35,040 ‫the onClose modal function into this form. 280 00:16:35,040 --> 00:16:39,210 ‫And so if that existed, then here the type 281 00:16:39,210 --> 00:16:41,673 ‫of the form would be a modal form. 282 00:16:42,510 --> 00:16:45,600 ‫So right now that is not showing up here 283 00:16:45,600 --> 00:16:48,480 ‫because we are indeed not passing in 284 00:16:48,480 --> 00:16:51,450 ‫the onClose modal function yet. 285 00:16:51,450 --> 00:16:53,403 ‫And so let's change that. 286 00:16:54,690 --> 00:16:59,220 ‫So right here in our modal is where we will have to pass 287 00:16:59,220 --> 00:17:01,890 ‫in that function because, again, 288 00:17:01,890 --> 00:17:04,740 ‫we can no longer pass it in here. 289 00:17:04,740 --> 00:17:06,660 ‫So that's what we did earlier. 290 00:17:06,660 --> 00:17:09,930 ‫We passed that function here, but again, 291 00:17:09,930 --> 00:17:12,780 ‫now we do not have that function out here, 292 00:17:12,780 --> 00:17:15,990 ‫which is actually great, but now that means 293 00:17:15,990 --> 00:17:19,230 ‫that we need to pass it in in another way. 294 00:17:19,230 --> 00:17:21,150 ‫And the way we will do that 295 00:17:21,150 --> 00:17:24,153 ‫is exactly with the same technique as here. 296 00:17:25,050 --> 00:17:28,593 ‫So we will grab this children and clone it. 297 00:17:30,810 --> 00:17:35,010 ‫So clone the children, and then we pass in again props. 298 00:17:35,010 --> 00:17:37,798 ‫And this time the name of the prop is called 299 00:17:37,798 --> 00:17:42,753 ‫onCloseModal, and we just set it to the close function. 300 00:17:44,370 --> 00:17:45,960 ‫And there we go. 301 00:17:45,960 --> 00:17:49,590 ‫So immediately you saw that the styling had changed. 302 00:17:49,590 --> 00:17:52,770 ‫And now we can also close the modal by clicking 303 00:17:52,770 --> 00:17:56,913 ‫on this button and also by submitting here in new cabin. 304 00:17:58,350 --> 00:18:02,580 ‫Beautiful. So it's working really great. 305 00:18:02,580 --> 00:18:07,580 ‫Let's now just only, or also activate this one. 306 00:18:08,040 --> 00:18:12,153 ‫So here we want to then display the CabinTable. 307 00:18:14,910 --> 00:18:16,083 ‫So just to see. 308 00:18:17,070 --> 00:18:19,830 ‫So indeed we get another button, 309 00:18:19,830 --> 00:18:22,050 ‫and this one here has this prop. 310 00:18:22,050 --> 00:18:25,440 ‫And so therefore now, as we click this button here, 311 00:18:25,440 --> 00:18:29,700 ‫the openName will become table, right? 312 00:18:29,700 --> 00:18:32,430 ‫So that's the opens prop right here. 313 00:18:32,430 --> 00:18:35,610 ‫And therefore if we click the button here, 314 00:18:35,610 --> 00:18:39,270 ‫then the opens function will get called, 315 00:18:39,270 --> 00:18:44,040 ‫and then that will set table right here 316 00:18:44,040 --> 00:18:45,453 ‫to this openName. 317 00:18:47,310 --> 00:18:50,670 ‫Okay, and then here in our windows, 318 00:18:50,670 --> 00:18:54,150 ‫one of the two windows will then have the name 319 00:18:54,150 --> 00:18:58,290 ‫equal to table, and so that one will then no longer 320 00:18:58,290 --> 00:19:03,290 ‫return null but will instead return our window. 321 00:19:05,010 --> 00:19:08,460 ‫And beautiful. Great. 322 00:19:08,460 --> 00:19:10,743 ‫So here we now get our table, 323 00:19:11,970 --> 00:19:15,273 ‫and here we get our cabin form. 324 00:19:16,200 --> 00:19:18,030 ‫Very nice. 325 00:19:18,030 --> 00:19:21,723 ‫And with this, actually our work here is done. 326 00:19:22,830 --> 00:19:27,360 ‫So I hope that this new implementation of the modal 327 00:19:27,360 --> 00:19:31,680 ‫using the compound component pattern made sense to you. 328 00:19:31,680 --> 00:19:34,020 ‫Now, the main focus here is really 329 00:19:34,020 --> 00:19:37,260 ‫on how to use this very important pattern. 330 00:19:37,260 --> 00:19:38,850 ‫So don't focus too much 331 00:19:38,850 --> 00:19:41,430 ‫on the specific implementation details 332 00:19:41,430 --> 00:19:44,370 ‫of this specific modal component. 333 00:19:44,370 --> 00:19:47,400 ‫So when you use this compound component pattern 334 00:19:47,400 --> 00:19:50,580 ‫in the future to maybe build your own components, 335 00:19:50,580 --> 00:19:54,180 ‫then those won't be maybe modal components. 336 00:19:54,180 --> 00:19:57,390 ‫And so really what I want you to retain the most 337 00:19:57,390 --> 00:20:01,110 ‫from this lecture is really how we can use 338 00:20:01,110 --> 00:20:04,590 ‫these different basically child components 339 00:20:04,590 --> 00:20:07,050 ‫to together achieve a goal. 340 00:20:07,050 --> 00:20:10,920 ‫So in this case, displaying a modal window. 341 00:20:10,920 --> 00:20:13,350 ‫And it's always in the same way. 342 00:20:13,350 --> 00:20:17,100 ‫So we have some state and some state updating functions 343 00:20:17,100 --> 00:20:18,990 ‫here in the parent component. 344 00:20:18,990 --> 00:20:21,090 ‫Then we pass that with a context, 345 00:20:21,090 --> 00:20:23,520 ‫and then in the child components, 346 00:20:23,520 --> 00:20:25,950 ‫we use those to achieve the goal 347 00:20:25,950 --> 00:20:29,193 ‫of displaying a modal window in this case. 348 00:20:30,030 --> 00:20:33,600 ‫So I want you to study this pattern here a little bit more, 349 00:20:33,600 --> 00:20:36,720 ‫maybe review all the code that we wrote. 350 00:20:36,720 --> 00:20:39,870 ‫You can also check out the component tree as always, 351 00:20:39,870 --> 00:20:44,100 ‫because it's actually pretty interesting in this case. 352 00:20:44,100 --> 00:20:46,560 ‫For example, the fact that we do indeed 353 00:20:46,560 --> 00:20:51,390 ‫have all the windows already in our component tree. 354 00:20:51,390 --> 00:20:53,580 ‫So here we have the one with the table 355 00:20:53,580 --> 00:20:56,250 ‫and the one with cabin form. 356 00:20:56,250 --> 00:20:58,140 ‫So they are actually rendered, 357 00:20:58,140 --> 00:21:00,570 ‫but they are not rendering anything. 358 00:21:00,570 --> 00:21:02,760 ‫So they only start rendering something 359 00:21:02,760 --> 00:21:07,760 ‫when this name here is equal to the openName State here. 360 00:21:09,060 --> 00:21:10,140 ‫So this one. 361 00:21:10,140 --> 00:21:11,913 ‫So if we change this to table, 362 00:21:12,900 --> 00:21:16,893 ‫then indeed the table modal window will show up. 363 00:21:19,350 --> 00:21:23,220 ‫All right, then also review maybe this technique here, 364 00:21:23,220 --> 00:21:26,310 ‫and you can think of a few other use cases maybe, 365 00:21:26,310 --> 00:21:29,400 ‫and also read again the documentation. 366 00:21:29,400 --> 00:21:32,130 ‫And then once you're done with all that, 367 00:21:32,130 --> 00:21:34,920 ‫so really understanding what we did here, 368 00:21:34,920 --> 00:21:36,960 ‫let's move on to the next lecture 369 00:21:36,960 --> 00:21:40,740 ‫where we will implement one final missing detail 370 00:21:40,740 --> 00:21:42,393 ‫of this modal window.