Complete Intro to React, v5 Displaying the Modal

Transcript from the "Displaying the Modal" Lesson

[00:00:00]
>> Brian Holt: Go to details.js, and we want to make it so whenever you click on this nice button here, that it pops open a module. So what we're gonna do here is we're going to import navigate from @reach/router
>> Brian Holt: And we're going to import our modal as well. Modal from ./modal.

[00:00:34]
>> Brian Holt: Sorry, @reach, not react, @reach/router.
>> Brian Holt: Okay? We'll add a new piece of state here, and it's gonna be called showModal and we're not gonna initially show it.
>> Brian Holt: Okay, we need one more piece of state from animal now. I mean, its URL, so I'm gonna say URL and get to grab that off of animal type URL.

[00:01:07] This is actually the URL that you will go to to adopt the pet. Okay, above the render here, we're going to put a new method called toggle modal.
>> Brian Holt: And we'll just make this a very quick this.setState of showModal, and you just want to be the opposite of whatever showModal was, so this.state.showModal.

[00:01:43] So if it's false, make it true, and if it's true, make it false.
>> Brian Holt: And then underneath that, we're gonna make an adopt function as well. It's just gonna be an arrow function. And all it's gonna do is navigate to this.state.url.
>> Brian Holt: We could have done this with the redirect component as well, I wanted to show you both.

[00:02:11]
>> Brian Holt: I don't think there is really an advantage. The React router and the Reach router people encourage you to use a redirect component, that's what they say they prefer. But I think it's a perfectly good decision to decide either way.
>> Brian Holt: Okay, down here, here, inside of media, we're gonna put showModal as well, cuz we're gonna grab that out.

[00:02:40]
>> Brian Holt: So I just add 41 there.
>> Brian Holt: And then below the description, we're gonna put this.
>> Brian Holt: So pick up your curly braces here, and then we're gonna do a ternary. So if I should showModal, then display this, I'm sorry, modal. And inside of that, we're going to put our own mark up of like <h1> Would you like to adopt name?

[00:03:24]
>> Brian Holt: Then put a div and className="buttons".
>> Brian Holt: And then here, we're gonna say, button onClick= this.adopt.
>> Brian Holt: And you say, yes. And then you're gonna say, no, I'm a monster, and you just toggle the model.
>> Brian Holt: My goal is to shame someone into buying a pet. Just kidding, only buy a pet if you are ready for one, but please adopt all the pets.

[00:04:14]
>> Brian Holt: And then afterwards, after this parenthesis right here, I put :null, right? So if you tell React to render null, as you may guess, it renders nothing. So if you're showing the modal, then show the modal. If not, show modal then show nothing.
>> Brian Holt: Why don't you like that?

[00:04:47]
>> Brian Holt: Fine, I am a monster. I don't know why it's doing that. Then we have to put it so that when you click on Adopt, here, on this button. So the onClick here, you're gonna say this.toggleModal, right? So whenever someone clicks on the Adopt button, it shows the modal.

[00:05:15]
>> Brian Holt: So line 53 here, it's what I added. Let's go take a look at what looks like now. So we got the goodest boy here, Fat Boy Slim. If I click on Adopt Fat Boy Slim, Would you like to adopt Fatboy Slim? And you say Yes or No, I'm a monster.

[00:05:32] [LAUGH] So if you clicked yes, it'll navigate to Fat Boy Slim's
>> Brian Holt: Page.
>> Brian Holt: But if you click on No, I'm a monster, it closes the modal.
>> Brian Holt: Pretty cool, right? So just to remphasize what I think is cool about this, this modal is now 100% flexible. Any time that I need to show a modal, I just pull this in and it just works.

[00:06:09] And just to prove my point to you, if I inspect element here,
>> Brian Holt: Notice that I have modal and root, and these are two totally different places. But this is all happening in here outside of root, which is really cool. But because this is on React, like I'm using functions from this component, I'm using the name, which is coming out as components, I'm using all this stuff inside of it but it's rendering somewhere else.

[00:06:38] It's actually really cool because if you're doing event listeners, so let's say I have an event listener here on div, which is above the modal, and say onClick. And all it does is console.log it.
>> Brian Holt: Now, it should still work where, let's make sure I'm not crazy here.

[00:07:13]
>> Brian Holt: Okay, so the click listener is working. Anywhere I click on the div, it's gonna show these events. But if I click into this, let me just trash this so you can see. I'm clicking on DOM elements outside of this div, but it's still getting dispatched correctly. So the event delegation actually will still go through the same React tree.

[00:07:36] Cuz React has its own event system. It looks exactly and it acts exactly the same but it has nice features like this where I can actually handle event delegation outside of that DOM. That's really cool too. I don't know why this should be useful, I'm just fascinated by it.

[00:07:53]
>> Brian Holt: Great, any questions about portals? So this is useful for things like modals but it also could be useful for like, maybe you have, again, like a contextual navigation or something like that, you could handle that with a portal. You could handle a special header or a special footer or lots of things like that.

[00:08:15] At Netflix, we used portals to render into the player because the player was a separate thing, so there's a bunch of cool stuff you could do with them. This used to be impossible, it used to be impossible to handle these kinds of things. We actually had to build this crazy special render that Netflix only used for a long time to handle that.