Use React Portals to build a Modal

[Music] okay so I had another sound issue this is a retake of a sound issue sorry I made it so that I won't make that mistake again probably so okay we're talking about modal's with react and I'm gonna do something kind of fun this time I'm going to go live in this code sandbox I'm going to change this to classroom so only I can edit as otherwise things might get a little bit nuts um but I'm going to paste this in the chat so anybody who's watching live can come and look around and stuff I don't know maybe that would be fun but what we're looking at now is a use case for react portals so this is a recent feature in react I think it's like reacts 16 something maybe I haven't really used it a whole lot but there are some pretty good use cases for it and this is this is one of them so if I click on this show a secret modal pops up with the secret message but the the modal actually what is being rendered is all of this stuff not just the box you see in the middle but everything around that's where we're getting this position:absolute background color is all nice and stuff the problem is that it's constrained to this a little box and that little box is this div and as a position:relative now if we didn't have the position:relative there it would be fine it worked exactly as we want it to but because that position:relative is there it's being constrained down to just this little box which is kind of annoying and so like this is a bit of a contrived example you'd say well why don't you just remove that position:relative you don't need it well I mean in a real application you're going to have modal's that are initialized to like way down in your tree there's going to be position:relative somewhere there are other reasons where it can be useful to render something kind of outside of the react tree and so that's what we're going to do today so one way we could do this is we'd say this model has a render that just returns null and then on component to mount we use react Dom render directly and we render to some other elements and if we were to implement this directly in regular HTML and vanilla JavaScript then we just make our modal root div here alongside our application root and then it's outside of the main tree and so all of that would work just fine but react has a built-in mechanism for doing something like this Dom dot create portal and the first argument for create portal is the same thing that you do in a regular render method so it's just the react elements that you want to have rendered in that portal but it does take a second argument and it's similar to react Dom render in that way it takes and elements so we're gonna add a member property onto our class instance our mobile instance that is called L so let's go ahead and create that the L is document that create element div okay and then so we can render this and and this actually would work but the element right now is not attached to anything and so we need to have it be attached to the modal root so let's get a handle on that we'll just copy this all this modal woops modal root and then in component the component did mount will have modal roots dot append a child this tile and then when this thing unmount we want to remove it from the modal root and so we'll say a component will an amount modal root remove child Vista L well let's see what happens it works like magic and here if we pop this open in a new window and then go here just verify that this is working show secret modal that thing appears right here rather than where it's actually being rendered which is below this button so as far as our code is concerned that's being rendered below this button but as far as what actually happens with being rendered inside of the modal route which i think is actually kind of neat then we can look at the react dev tools here and we'll see the modal is positioned right where we expect it to and react dev tools and yeah so it kind of works a little bit a little nicer there it's all in one cohesive thing here so anyway that's a let's react portals there's not a whole lot to it to be honest you like the only difference is your instead of returning regular JSX you return react Dom create portal and then you have to have an element that you mount this portal to and so that element needs to be in the document some in some way shape or form in fact we might be able to get away with doing something like this I hadn't tried this but probably should work so then we show secret modal and that works too we don't need that extra element and so then we could just up it kind of depends on your use case you might have like multiple modal's being rendered within this div or something I don't know all right not a good idea from user effective but anyway that totally works and I hope that's helpful so yeah I'll see you all later peace

Channel: Kent C. Dodds

Views: 20,081

Keywords: javascript, react, createportal, devtipswithkent

Id: 538Zu3Y0xTA

Length: 6min 35sec (395 seconds)

Published: Fri Jun 01 2018