1 00:00:00,940 --> 00:00:05,740 In the last video we spoke about why we use portals so any time that we want to kind of get a element 2 00:00:05,770 --> 00:00:11,350 not rendered as a direct descendant of some component we can use a portal to instead place that component 3 00:00:11,410 --> 00:00:15,070 as a descendant of some other element inside of our T.M. structure. 4 00:00:15,070 --> 00:00:20,110 The most common uses for this are to make modal windows or any that we want to work with some third 5 00:00:20,110 --> 00:00:25,480 party library or use react to render some content into some third party element or something like that. 6 00:00:25,510 --> 00:00:28,030 So let's try creating a new modal element. 7 00:00:28,180 --> 00:00:33,190 We're going to build this as a reusable component where we can show any content inside of it that we 8 00:00:33,190 --> 00:00:34,280 want to show. 9 00:00:34,300 --> 00:00:35,230 So let's get to it. 10 00:00:35,290 --> 00:00:37,500 I'm going to flip back over to my code editor. 11 00:00:37,630 --> 00:00:39,920 I'm going to close down that motile HTL file. 12 00:00:39,940 --> 00:00:45,100 You can delete it if you want to but I would recommend just keep it around as a quick example. 13 00:00:45,100 --> 00:00:55,450 Then inside of my components directory I'm going to make a new file called modal dot G-S and then inside 14 00:00:55,450 --> 00:00:59,990 of here we're going to put together a little bit of boilerplate for a functional component. 15 00:01:00,190 --> 00:01:03,140 So I'll say import re-act from react. 16 00:01:03,460 --> 00:01:09,730 I'll say import react Dom from re-act dash Dom. 17 00:01:09,730 --> 00:01:14,650 Notice how we are importing react Dom inside of your which we normally do not do except inside of our 18 00:01:14,740 --> 00:01:15,990 root component file. 19 00:01:16,000 --> 00:01:18,260 Usually the index not G-S file. 20 00:01:18,550 --> 00:01:24,220 Then after that I'll defined my functional component so say Konst modal is going to receive some number 21 00:01:24,220 --> 00:01:29,500 of props we're going to use that in just a little bit and then right now I'll just very quickly export 22 00:01:29,620 --> 00:01:32,410 default modal at the bottom. 23 00:01:32,410 --> 00:01:38,230 All right so now at this point I know that you are very much used to always returning some GSX from 24 00:01:38,260 --> 00:01:43,390 all of our components like so right we return some GSX have some techs inside of it or reference to 25 00:01:43,390 --> 00:01:45,340 another element or something like that. 26 00:01:45,460 --> 00:01:51,080 When we create a portal the return value of our component is going to change just a little bit. 27 00:01:51,130 --> 00:01:52,690 So here's what we're going to do. 28 00:01:52,720 --> 00:01:58,100 We're going to say react Dom don't create portal. 29 00:01:58,220 --> 00:02:03,260 Now this function is going to take two separate elements or submit arguments the first argument is going 30 00:02:03,260 --> 00:02:07,880 to be some blob of GSX something that we want to show on the screen. 31 00:02:07,880 --> 00:02:13,350 So in this case I'm going to put in as the first argument a div with a class name. 32 00:02:14,460 --> 00:02:19,420 Of UI dimmer modals visible active like so. 33 00:02:19,560 --> 00:02:21,670 Now that seems like a very specific class name. 34 00:02:21,720 --> 00:02:27,430 While the class name is coming from semantic UI remember we have semantic UI wired up to this project. 35 00:02:27,540 --> 00:02:32,100 So these are all the class names that are required to get a modal or the background to be precise to 36 00:02:32,100 --> 00:02:33,720 display on the screen. 37 00:02:34,170 --> 00:02:41,040 Then inside that div I'm going to place another div with the class name of UI standard modal visible 38 00:02:41,160 --> 00:02:47,560 active and then finally inside of there I'll just place a little bit of jibberish for right now. 39 00:02:47,680 --> 00:02:50,360 So this should get a modal to show up. 40 00:02:50,380 --> 00:02:55,540 Now the only issue is that we need to make sure that this modal or these two divs right here are rendered 41 00:02:55,600 --> 00:03:01,690 directly on our body element as opposed to being deeply nested underneath like stream delete or something 42 00:03:01,690 --> 00:03:02,430 like that. 43 00:03:03,240 --> 00:03:08,430 So in order to make sure that we attach that modal or that did those two divs appropriately to the body 44 00:03:08,430 --> 00:03:12,590 element we're going to provide a second argument to create portal. 45 00:03:12,630 --> 00:03:14,510 So I going to put a comma right there. 46 00:03:15,700 --> 00:03:20,680 And then as the second argument I'm going to provide a reference to the element that I want to render 47 00:03:20,740 --> 00:03:22,390 this portal into. 48 00:03:22,390 --> 00:03:26,590 Now I know that I've been saying oh yeah we're going to attach it to the body attached to the body. 49 00:03:26,740 --> 00:03:31,660 Well if we try to attach this to the body or give a direct reference to the body then that portal is 50 00:03:31,660 --> 00:03:34,540 going to actually replace all the current content in the body. 51 00:03:34,720 --> 00:03:42,210 So instead what we usually do when we create a portal is we will go into our index each file and we'll 52 00:03:42,210 --> 00:03:48,570 create a new div with some ID and the will target that div to place our render. 53 00:03:48,590 --> 00:03:53,550 I mean our mode our modals has me into going to flip back over to my index. 54 00:03:53,620 --> 00:03:56,940 HTL file instead of my public directory. 55 00:03:56,940 --> 00:04:01,680 So this time index dot H.M. not the modal dot HTL file. 56 00:04:01,830 --> 00:04:07,670 Then inside if you're going to scroll down to our div with idea of root and as a sibling to that I'll 57 00:04:07,680 --> 00:04:13,740 place a div with an ID of motile like so. 58 00:04:13,740 --> 00:04:19,060 So now we're going to provide a reference to this div right here to that create portal call so going 59 00:04:19,120 --> 00:04:21,960 to save the HMO file I'll close it. 60 00:04:21,960 --> 00:04:27,570 I'm going to go back over to my motile dot J.S. file and I'll provide a selector for that or a reference 61 00:04:27,570 --> 00:04:35,410 to that div by saying document Dom query selector pounde modal like so. 62 00:04:35,910 --> 00:04:37,110 And that's pretty much it. 63 00:04:37,300 --> 00:04:42,520 So now anytime that we render our modal component on the screen rather than showing up as a direct child 64 00:04:42,550 --> 00:04:47,830 of the parent component Ill be rendered into the div with an idea of modal. 65 00:04:47,830 --> 00:04:52,630 Now if this div does not exist inside of our HMO document we're going to very quickly see an error message. 66 00:04:52,630 --> 00:04:54,550 So just be aware of that. 67 00:04:54,550 --> 00:04:59,140 Now last we have do is attempt to actually show this component on the screen so I'm going to open up 68 00:04:59,140 --> 00:05:04,220 my stream delete component stream delete at the top. 69 00:05:04,230 --> 00:05:12,990 I'm going to import motile from up one directory modal and then I'm going to turn this into a multi-line 70 00:05:13,080 --> 00:05:18,180 GSX expression. 71 00:05:18,230 --> 00:05:23,830 Make sure you take care of that semicolon right there and then as a child or a sibling to stream delete 72 00:05:23,840 --> 00:05:24,960 right here the plain text. 73 00:05:24,980 --> 00:05:27,630 I'm going to place my modal component like so. 74 00:05:28,010 --> 00:05:34,400 So now anytime that we show stream delete we're going to render modal modal is going to take this GSX 75 00:05:34,400 --> 00:05:39,940 right here and attempt to insert it as a child to that div with the ID of modal. 76 00:05:39,990 --> 00:05:41,120 So let's now save this. 77 00:05:41,150 --> 00:05:44,340 Well flip back over to our browser and see how it works. 78 00:05:44,360 --> 00:05:50,840 So I'm going to flip back over to my application at localhost 3000 and then we need to get that delete 79 00:05:50,840 --> 00:05:55,430 component to appear on the screen as a quick reminder we can find out that you are l or the path to 80 00:05:55,430 --> 00:05:57,080 use to access that component. 81 00:05:57,080 --> 00:05:59,540 If we open up our app component. 82 00:05:59,690 --> 00:06:01,340 So here's app right here. 83 00:06:01,340 --> 00:06:02,970 Here are our routing rules. 84 00:06:03,080 --> 00:06:07,190 So if we just go to stream slash delete we should see that component appear. 85 00:06:07,750 --> 00:06:10,490 So I'm going to go to local those three thousand streams. 86 00:06:10,520 --> 00:06:11,940 Slash delete. 87 00:06:13,420 --> 00:06:15,990 And now I see my motile appear on the screen successfully. 88 00:06:16,060 --> 00:06:19,050 I know it's really ugly but it is technically working. 89 00:06:19,210 --> 00:06:20,830 We've got our text inside of your. 90 00:06:20,830 --> 00:06:22,240 We've got the gray background. 91 00:06:22,240 --> 00:06:25,430 And I can kind of see the elements behind it but not quite. 92 00:06:25,600 --> 00:06:27,990 So the model is definitely working as expected. 93 00:06:28,240 --> 00:06:29,750 OK so that's pretty much it. 94 00:06:29,770 --> 00:06:34,550 That's not what we use these portal things for any time we want to create a portal. 95 00:06:34,570 --> 00:06:37,290 We return a reference or a call to react on. 96 00:06:37,510 --> 00:06:38,600 Create portal. 97 00:06:38,650 --> 00:06:40,960 The first argument is going to be some GSX. 98 00:06:40,990 --> 00:06:44,800 The second argument is going to be a reference to a DML element. 99 00:06:44,830 --> 00:06:48,700 Usually we're going to get that reference by using Document query selector. 100 00:06:48,730 --> 00:06:52,240 Now the only time that you're going to want to create a portal is anytime that you are doing something 101 00:06:52,240 --> 00:06:58,510 like say creating a modal obvious case or any time that you are trying to render some re-act component 102 00:06:58,660 --> 00:07:05,220 into some DML that was not created by your application or by your re-act application to be more specific. 103 00:07:05,260 --> 00:07:09,850 The most common case in which you will use something like create portal in that in that type of scenario 104 00:07:10,000 --> 00:07:16,300 is if you're trying to introduce re-act into a server side rendered application maybe like a Java application 105 00:07:16,300 --> 00:07:22,380 that renders HTL on the back end or maybe a Ruby on Rails application or Django or something like that. 106 00:07:22,680 --> 00:07:22,970 OK. 107 00:07:22,990 --> 00:07:25,300 Now we've got our modal component put together. 108 00:07:25,300 --> 00:07:26,640 Let's take a quick pause right here. 109 00:07:26,650 --> 00:07:31,210 When we come back the next section we're going to start to customize this thing so that it looks a little 110 00:07:31,210 --> 00:07:33,800 bit better a little bit closer to what you see it right here. 111 00:07:33,940 --> 00:07:36,490 So quick pause and I'll see you in just a minute.