Learn React Portal In 12 Minutes By Building A Modal

in this video i'm going to show you how to use portals in react in order to create a pop-up element and i'm going to show you how to avoid all of the nasty problems people run into when trying to create a pop-up also if you want to learn everything you need to know about react make sure to check out my full react course i'm going to link in the description down below let's get started now [Music] welcome back to web dev simplified my name is kyle and my job is to simplify the web for you so you can start building your dream project sooner so if that sounds interesting make sure you subscribe to the channel for more videos just like this now as i mentioned in this video i'm going to be covering how to create a pop-up in react and we're going to make sure to use portals in react which is the best way to handle pop-ups and i'm going to explain why later as we get to that point also if you want to learn even more about react portals i have a full blog post on it i'll link in the cards and description down below now to get started i ran create react app and i deleted out all of the code that we're not going to need and i added in just a little bit of boilerplate so we don't have to type this out essentially i have here a button for opening up our mortal modal and i have here just some other information on the page just so i can show you the problem you're going to run into when creating a modal i also have some really basic styles set up i have some z index properties applied to this wrapper around our button and then some more z index and color changing stuff for this other content down here and all we want to do is have this button open up some form of modal so let's create a component called modal which is going to be our modal content that we're going to open up whenever we click our button so we have a modal and in here we're just going to say something like fancy modal and when we render this modal we want this text to be shown inside of that modal so what we need to do is come over here and create a modal.js now i have an extension installed so i can just hit rfc enter and it'll create a function component for me all you need to do is come over here and find es6 es7 i'm sorry react redux graphql react native snippets and that's going to give you this exact same shortcut that i used here so now once we have that created we know that inside of our modal we're passing down something called children and this children property is just this text inside of here so for now let's just render out our children and if we save this come over here and import modal which is going to be from dot slash modal and save you can see our modal is being rendered right here right after our button and for now that's okay we don't have all of our styling yet for our modal and we don't have it opening and closing so let's next work on this open close feature we're going to need to have some state to do that so we're going to come in here with use state we're going to set up some state for open and closed so we're going to say is open and set is open and that's going to be use state by default we're going to set that to false and then on our modal we're just going to say open is going to be equal to here is open and then when we click our button we want to open it so we can say on click we want to set this here to a function and all this function is going to do is just going to set is open to be true and if we save this you're going to notice again nothing's actually happening and that's because in our modal we aren't actually using that open prop so if we are not open we'll just return nothing so if not open we just want to return here null so we're not going to render anything but if we are open then we're going to render our actual content so if we save you can see our modal is not open and when we click this button you can see our modal is going to open up now that's great but we need some way to close our modal so let's add a button in here we can just say button and this button is going to say close modal we just want to say on click we're going to call a function which is going to be called on close we're going to pass that in here so on close so when this button is clicked we're going to call this on close function and this on close function we're going to define over here so on close all we're going to do inside of here oops is we're going to call our set is open and we're going to pass in false now if we save click open modal you can see we have our close model button as well as our actual text if we click close it's going to close it we can do this as many times as we want now this is the basics of our modal but let's go ahead and add some styles and we're going to immediately notice some problems so let's come up here we're going to say modal styles this is just going to be equal to an object so we're going to set a position here which is going to be fixed because we want this to always be fixed on our page we want the top to be 50 percent we want the left to be 50 just like that we're also going to set up a transform to center object so we're going to say translate we want to do negative 50 and negative 50 this is going to make it so our modal appears dead center in our screen we're going to give it a background color which is going to be white we could say fff and we're also going to come in here with a padding of 50 pixels just to give it a little bit of space and then lastly we want this to appear on top of everything so we're going to give it a z index of 1000 and now if we set those styles here so we can say style it's going to be equal to those modal styles and we save when we open this you're going to see our modal is appearing dead center in our screen now in order to make this modal a little bit better another thing that i want to do is add in some kind of overlay that goes over the rest of our content so to do that let's just set up a fragment here and this fragment is going to contain all of our current modal code and then up here we're going to create another div which is going to have a style which we're going to set to overlay styles and we're going to close off this div this div is going to be for our black color that's going to obscure everything else on our page so we can say overlay styles make sure that has an s and we come in here and these overlay styles is going to be very similar we're going to have a position which is fixed we're going to have a top of zero a left of zero a right of zero a bottom of zero so it's going to cover the entire page and our background color here is going to be rgba would you want this to be completely black we want it to be partially transparent so we'll use 0.7 and then lastly we're going to use the same z index of 1000 so it appears above everything else and now we're going to save click open modal and you're going to immediately notice a problem and this is what happens when you don't use portals when you try to render this type of overlay content that goes outside of its children so what happens is this other content section is appearing over top of this overlay that we've created here and the reason that this is happening if we go back into our app is that this modal is inside of this div which has certain styles applied to it and these styles essentially create a stacking context in css you don't need to know what this is but all it means is that elements inside of it can never appear over top of the z index here of one while this is the index here is a 2 for our red other content so our red other content is appearing over top of this button wrapper which means it appears over top of our modal and this is a big problem we don't want to have this happen inside of our app we want our modal to appear above everything else no matter what so the way to do that is by using portals in react normally when you render something in react we go over here to index.js you'll see that we have our app which we're rendering inside of the root element in our index.html if we open up that index.html you see we have this div root here but what if we want to render something not inside the root what if we wanted to have another div which is going to have an id here of portal and what if we wanted to render our model inside of this portal well to do that inside of a react we could really easily do that by using react.create portal so inside of our modal here let's import oops import react dom from react dash dom this is what property here has that actual method for creating our portal and down here inside of a return what we want to do is react dom dot create portal and this create portal is going to take the element we want to create for example our modal here and then after that what it's going to do is it's going to take a place we want to add that element so just like in index.js when we have reactdom.render we have our element and then we have the place to render it to so in our modal this is just going to be document dot get element iid and this is going to be our id of portal now when we save this and click open modal you can see that this modal is showing up over everything else if we actually inspect this and look at our actual html elements here if i just make this a little bit bigger you can see that we have two divs we have our portal div and our root div and this root div contains here our modal button as well as our other content and then our portal div here contains our actual portal and the overlay itself so we have our closed modal and our fancy model here all that's inside this portal div here so what we've done is essentially inside of our app we have a component which is a children of some other components and we forced this child component here to render outside of its parent by creating a portal to somewhere else in this portal is this div here so now we're rendering this modal inside of that div even though it's a child of a different component and the real thing that makes this super powerful is that you have event delegation built into this in a way that all of the events on this modal are going to delegate up to the parents of this modal so normally when you click on a button for example that's inside of a div the div is going to get that event so we can say on click here and set this to just a simple function which is going to call console.log of clicked just like that and now when we click on anything inside of this div for example this button it's going to propagate that on click up to this div and we're going to see that being logged out so if we come over here go to our console and if we click on this open modal you're going to see it says clicked here and that's because we clicked inside of this div container but with react portals what happens is that this modal is inside of this div inside of our jsx but in reality it's rendered outside of the div because if we go to our elements here you know that this div portal is where our modal is being rendered and it's not actually being rendered inside of this div here but when we click inside of this modal you're going to see this clicked is going to be printed out as you can see when we click here it's delegating that event up from our modal here all the way up to this div which is actually capturing that and then logging out that click so this is something that's really powerful with react portal is that it allows you to keep that child parent relation when it comes to click events and when it comes to rendering out your content in jsx but you can actually render that content somewhere else by taking advantage of this portal if we were to instead come into our modal here and instead of doing create portal we were just to do what we have in our index here which is render so if we just said render like this everything is going to work essentially the same it's going to look like it works exactly the same but this clicked here it's not going to actually fire when we click inside of our modal and that's because portals when we did create portal here oops create portal this is what actually allows us to that event delegation while render does not allow us to do that so if you're going to need to do something where you have a modal or some other element like a tool tip where you need to render it always on top of things or outside of the current route make sure that you use a portal to do that and it's going to keep intact all of that event delegation as well as parent child relations that you definitely want to keep and that's all there is to react portal if you enjoyed this video make sure to check out my complete react course i have links down in the description below thank you very much for watching and have a good day

Channel: Web Dev Simplified

Views: 84,794

Keywords: webdevsimplified, react portal, react, react js, reactjs, react js portal, react modal, react js modal, reactjs modal, reactjs portal, react tutorial, react portal tutorial, reactjs portal tutorial, react js portal tutorial, react js modal popup, react js popup, react popup, reactjs popup, react popup form, react modal form, react js popup tutoroal, react modal tutorial, react js modal tutorial, reactjs popup tutorial, react popup window, javascript, js, react js tutorial

Id: LyLa7dU5tp8

Length: 12min 10sec (730 seconds)

Published: Sat Aug 08 2020