In the last video we spoke about why we use portals so any time that we want to kind of get a element
not rendered as a direct descendant of some component we can use a portal to instead place that component
as a descendant of some other element inside of our T.M. structure.
The most common uses for this are to make modal windows or any that we want to work with some third
party library or use react to render some content into some third party element or something like that.
So let's try creating a new modal element.
We're going to build this as a reusable component where we can show any content inside of it that we
want to show.
So let's get to it.
I'm going to flip back over to my code editor.
I'm going to close down that motile HTL file.
You can delete it if you want to but I would recommend just keep it around as a quick example.
Then inside of my components directory I'm going to make a new file called modal dot G-S and then inside
of here we're going to put together a little bit of boilerplate for a functional component.
So I'll say import re-act from react.
I'll say import react Dom from re-act dash Dom.
Notice how we are importing react Dom inside of your which we normally do not do except inside of our
root component file.
Usually the index not G-S file.
Then after that I'll defined my functional component so say Konst modal is going to receive some number
of props we're going to use that in just a little bit and then right now I'll just very quickly export
default modal at the bottom.
All right so now at this point I know that you are very much used to always returning some GSX from
all of our components like so right we return some GSX have some techs inside of it or reference to
another element or something like that.
When we create a portal the return value of our component is going to change just a little bit.
So here's what we're going to do.
We're going to say react Dom don't create portal.
Now this function is going to take two separate elements or submit arguments the first argument is going
to be some blob of GSX something that we want to show on the screen.
So in this case I'm going to put in as the first argument a div with a class name.
Of UI dimmer modals visible active like so.
Now that seems like a very specific class name.
While the class name is coming from semantic UI remember we have semantic UI wired up to this project.
So these are all the class names that are required to get a modal or the background to be precise to
display on the screen.
Then inside that div I'm going to place another div with the class name of UI standard modal visible
active and then finally inside of there I'll just place a little bit of jibberish for right now.
So this should get a modal to show up.
Now the only issue is that we need to make sure that this modal or these two divs right here are rendered
directly on our body element as opposed to being deeply nested underneath like stream delete or something
like that.
So in order to make sure that we attach that modal or that did those two divs appropriately to the body
element we're going to provide a second argument to create portal.
So I going to put a comma right there.
And then as the second argument I'm going to provide a reference to the element that I want to render
this portal into.
Now I know that I've been saying oh yeah we're going to attach it to the body attached to the body.
Well if we try to attach this to the body or give a direct reference to the body then that portal is
going to actually replace all the current content in the body.
So instead what we usually do when we create a portal is we will go into our index each file and we'll
create a new div with some ID and the will target that div to place our render.
I mean our mode our modals has me into going to flip back over to my index.
HTL file instead of my public directory.
So this time index dot H.M. not the modal dot HTL file.
Then inside if you're going to scroll down to our div with idea of root and as a sibling to that I'll
place a div with an ID of motile like so.
So now we're going to provide a reference to this div right here to that create portal call so going
to save the HMO file I'll close it.
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
to that div by saying document Dom query selector pounde modal like so.
And that's pretty much it.
So now anytime that we render our modal component on the screen rather than showing up as a direct child
of the parent component Ill be rendered into the div with an idea of modal.
Now if this div does not exist inside of our HMO document we're going to very quickly see an error message.
So just be aware of that.
Now last we have do is attempt to actually show this component on the screen so I'm going to open up
my stream delete component stream delete at the top.
I'm going to import motile from up one directory modal and then I'm going to turn this into a multi-line
GSX expression.
Make sure you take care of that semicolon right there and then as a child or a sibling to stream delete
right here the plain text.
I'm going to place my modal component like so.
So now anytime that we show stream delete we're going to render modal modal is going to take this GSX
right here and attempt to insert it as a child to that div with the ID of modal.
So let's now save this.
Well flip back over to our browser and see how it works.
So I'm going to flip back over to my application at localhost 3000 and then we need to get that delete
component to appear on the screen as a quick reminder we can find out that you are l or the path to
use to access that component.
If we open up our app component.
So here's app right here.
Here are our routing rules.
So if we just go to stream slash delete we should see that component appear.
So I'm going to go to local those three thousand streams.
Slash delete.
And now I see my motile appear on the screen successfully.
I know it's really ugly but it is technically working.
We've got our text inside of your.
We've got the gray background.
And I can kind of see the elements behind it but not quite.
So the model is definitely working as expected.
OK so that's pretty much it.
That's not what we use these portal things for any time we want to create a portal.
We return a reference or a call to react on.
Create portal.
The first argument is going to be some GSX.
The second argument is going to be a reference to a DML element.
Usually we're going to get that reference by using Document query selector.
Now the only time that you're going to want to create a portal is anytime that you are doing something
like say creating a modal obvious case or any time that you are trying to render some re-act component
into some DML that was not created by your application or by your re-act application to be more specific.
The most common case in which you will use something like create portal in that in that type of scenario
is if you're trying to introduce re-act into a server side rendered application maybe like a Java application
that renders HTL on the back end or maybe a Ruby on Rails application or Django or something like that.
OK.
Now we've got our modal component put together.
Let's take a quick pause right here.
When we come back the next section we're going to start to customize this thing so that it looks a little
bit better a little bit closer to what you see it right here.
So quick pause and I'll see you in just a minute.