Check out a free preview of the full Complete Intro to React v4 course:
The "Portals" Lesson is part of the full, Complete Intro to React v4 course featured in this preview video. Here's what you'd learn in this lesson:

Modal windows have traditionally been difficult with React, since you have to render content in a different place. This is why React 16 created the concept of Portals, so you can have a component that renders wherever it needs to.

Get Unlimited Access Now

Transcript from the "Portals" Lesson

[00:00:00]
>> Brian Holt: We're gonna work on portals. So we used to have a big problem with rendering modals. In general, it's modals. Modals in general are just a problem in my opinion. [LAUGH] I hate modals. If you can avoid using modals on your website, just don't, right? No one likes modals.

[00:00:18] No one like's pop-overs. They're just an annoying pattern of UI and I think it's lazy design, if we're being honest. I'm still gonna show you how to do it. [LAUGH] So if I go in here to Blue, cuz Blue, he looks like the goodest boy that should be adopted.

[00:00:36]
>> Brian Holt: I wanna put a button here that says, are you sure you want to adopt Blue, right? And now we're doing a modal on top of that that I wanted the user to confirm. We're not gonna make it work cuz I don't want to send Pathfinder a bunch of garbage test responses, but I'm gonna show you how to make the modal, right?

[00:00:54]
>> Brian Holt: Before, what we would have to do is have some sort of root modal or component that would render over the top of things. It was really, really messy to do it, models with React previously. I know what went well is that NetFlix, we came up with this really complicated kind of contexty portal pattern that was ridiculous to maintain.

[00:01:14] It was constantly breaking. With React 16, they came out with the ability to do portals.
>> Brian Holt: Portals is basically, I have something inside of this details page, but I actually wanna render this out to a different location, right? So I'm gonna be rendering inside of details, but I want it to actually physically exist in the DOM in a different place, right, that's gonna be like a portal.

[00:01:39] Which ignore my previous analogy of portals with context please, this is a totally separate, different kind of portal. [LAUGH] This is terrible because everything is a context, everything's a portal, it's ridiculous. Anyway, I make no apologies.
>> Brian Holt: So what I want you to do is first thing I want you to go into index.html, okay?

[00:02:06]
>> Brian Holt: Not much in here. But I want you to put another div above the root. And this one's going to be called modal like that, line 13.
>> Brian Holt: We're going to render into this whenever we render a modal.
>> Brian Holt: Now, go make a new file called modal.js.
>> Brian Holt: Oops, I need to make a new one.

[00:02:38]
>> Brian Holt: modal.js inside your source directory.
>> Brian Holt: Now this code that I'm about to show you, literally copy and paste it from the React doc. So I didn't write this, this is just the prescribed way that they show you how to do portals. So import React from react and import createPortal from react-dom.

[00:03:10]
>> Brian Holt: const modalRoot equals document.getElementById modal, right? So we're actually gonna go grab that modal that we rented out to the dom. And then we're gonna make a class Modal extends React.Component.
>> Brian Holt: Gonna have a constructor with props.
>> Brian Holt: Super props,
>> Brian Holt: And we're gonna say this.el = document.createElement div.

[00:03:48] So this is the div that we're going to render into and then stick that inside of the modal, okay? componentDidMount,
>> Brian Holt: We're gonna do modalRoot.appendChild(this.el).
>> Brian Holt: And then when this unmounts, so componentWillUnmount up here, you have to go remove it, so you need to clean up after yourself afterwards.

[00:04:23] Yeah, modalRoot.removeChild,
>> Brian Holt: this.el, if you don't do this, you're gonna have memory leaks and it's going to crash your browser eventually. So that's what componentWillUnmount is almost always for is cleaning up your memory, removing event listeners, removing extraneous document stuff. Anything that's gonna leak memory, make sure you clean that up in componentWillUnmount.

[00:04:54]
>> Brian Holt: And then render, we're going to just return createPortal this.props.children this.l. And then export default Modal.
>> Brian Holt: That is it.
>> Brian Holt: That's a lot of space here. Let's kind of compact that up a little bit.