Check out a free preview of the full Complete Intro to React v4 course:
The "Rendering to the Portal" 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:

By using the Portal, we can now render html and events just like a normal React component inside the render method, but this time the rendering actually happens on a completely different part of the page where the Portal is attached.

Get Unlimited Access Now

Transcript from the "Rendering to the Portal" Lesson

[00:00:00]
>> Brian Holt: So now, let's go use it.
>> Brian Holt: So I want you to go to details.js.
>> Brian Holt: At the top, we're gonna import our modal.
>> Brian Holt: Okay.
>> Brian Holt: Underneath loading true, we're going to add showModal. While we're just debugging this, we're gonna have it start by showing the modals.

[00:00:40] So we'll say showModal true. Eventually, we'll make this false cuz we don't wanna show the modal every time that they, that's a little aggressive in my opinion. Okay? Underneath that, we're gonna make a method called toggleModal which will be an arrow function. And all we wanted to do was say set state, this.setState showModal.

[00:01:07] And this.state.showModal. If it's showing it, hide it. If it's hiding it, show it. That's all that toggleModal does. And then down here, below the h2, first of all here inside of the render. We're pulling out name, animal, breed, location, media. We also need to print out showModal here.

[00:01:32]
>> Brian Holt: Below the h2 here, we're gonna put a button, that says button onClick = this.toggleModal. And we're gonna make an adopt button, so Adopt name.
>> Brian Holt: And then the below the description here.
>> Brian Holt: So there's two kind of schools have thought of how to conditionally show and hide things in react.

[00:02:05] There's no clever NG if or anything like that. I'm gonna show you how to do an inline. Some people like this, some people really don't. Gonna put curly braces here and I'm just gonna do a ternary inline. So showModal.
>> Brian Holt: So if I should show the modal, then I'm gonna do Modal,

[00:02:30]
>> Brian Holt: h1, Would you like to adopt name.
>> Brian Holt: And then underneath, I will put div className = buttons and we'll have two buttons here.
>> Brian Holt: Button onClick = this.toggleModal, Yes. And then button, we'll just copy and paste that. And the other option will be, Hell Yes, Definitely Yes.

[00:03:19] [LAUGH] Because there's only one option when adopting animals, and the answer is yes. [LAUGH] But obviously, you could make this like maybe not. And then you would just make this call a different function. In our case, we're not actually going to implement the adopting feature of this. So it's gonna be yes and definitely yes.

[00:03:44] If we're not showing the modal, then we'll just not render anything here. So the way that you do that is :null. So if you render null in React, it just doesn't render anything, right?
>> Brian Holt: Does that make sense? So if showModal, render this. If not, after the colon here, render nothing.

[00:04:09] Now you could just go up here and put an if statement, like if showModal let modal, modal equals, whatever the modal, whatever stuff you put in there, else modal equals null. And then down here rather than having this whole hot mess here, you could just have modal, like that.

[00:04:35] And that would work as well, if you prefer that. I kind of like the inline cuz I can kind of see everything that, that could happen. I can see the branching logic, but I leave that to your discretion.
>> Brian Holt: It just depends on who you ask.
>> Brian Holt: Cool, so now, if you go back over here, it starts by popping up, would you like to adopt Blue?

[00:05:03] Right, if the answer is Yes or Definitely Yes. Think the answer was definitely yes, right? But notice, we can open that modal. But again, the interesting part of that is inspect element. Notice where it's rendering. So here's the root of our application over here, but this is rendering inside a modal, right?

[00:05:26] All this stuff over here is in an entirely separate part of the React dom, but even cooler, in my opinion, about this, onClick up here. This dot, or actually, I can just say console.log.
>> Brian Holt: If I refresh this,
>> Brian Holt: Notice that, so I have the modal that's rendering outside of the dom, right.

[00:05:59] So the way that the event bubbling inside of the dom works, this would not bubble up to div, right, because it's in a separate dom, right? But because it's in the same React dom, I can catch events coming out of modal, right, here on this div. So if I hit yes here, notice it still comes up here.

[00:06:16] So that still works. This is really compelling to me, because now I can do any sort of functionality inside of modal, despite the fact that lives in a different part of the dom. I can still catch those events here, inside details. Really cool, it allows you to make some pretty flexible features.

[00:06:37]
>> Brian Holt: So I get to treat this as if it was the same component the entire time. In fact, another way you can look at this, if we go into inspect element here, again different part of the dom. But if I go into React in the explorer here, notice, it's still inside the same React tree, so it's easy to debug.

[00:07:02] In other words, making modals got way easier with React 16.