Implementing Modals with Portals

[00:00:00]
>> So let's go to details.jsx. And we're gonna use this now. So up here at the top, we're gonna import some useState from React. I was like having React to the top, I don't know why that's just a force of habit I suppose. And then under here I'll put like import, Modal from modal, cool?

[00:00:41]
Here, I'm gonna have const showModal and then SetShowModal to useState, we do not want it to show by default, so I'm gonna say false. And then here on my button, I'm gonna have an unClick = setShowModal to be true. So anytime someone clicks the Adopt Pet name button, from inside our component, it's gonna show the modal, right?

[00:01:25]
And then now here's kind of a, we can put this modal really anywhere cuz it doesn't really matter. So we'll just put it here underneath the pet description. I'm gonna say if showModal. Then we're gonna display this modal. And here we'll have a div and h1 of would you like to adopt pet.name And then we have a div className = buttons.

[00:02:11]
And we have a button say yes. And a button to say, we'll put unClick on this as well to close the showModal. So onClick, SetShowModal to false, no. Okay, so if showModal is true, show the modal with all that stuff in it otherwise show them no, right? You can always render no which rendering no just does nothing, right?

[00:02:56]
This is a ternary, we've done this I think already in this class. But basically if this is true, do the first thing otherwise do the thing after it. So if it's true show the modal with all this stuff in it. If showModal is false and render nothing. Let's go make sure that I'm telling the truth here.

[00:03:17]
If I click adopt Luna and I get this nice modal here, right? And I'll click No, and it'll go away. So click this and then let's inspect element here. I have modal here and notice this is above root, this is a buffer app. So it's rendering to a different part of the application, right?

[00:03:44]
It's rendering above route, which made writing the CSS for this, extremely easy, right? This is the power of portal. This makes a lot of things like contextual navigation and writing the modals and stuff like that much easier. Cool, other things I think are cool about this, so I'm rendering this modal, it's rendering inside of this React application, right?

[00:04:11]
And I'm using things like SetShowModal and pet.name. So I'm using all the state from inside of this to render somewhere else, which you wouldn't be able to do otherwise, right? It'd be much harder for us to do this without a portal. We'd have to pull all of our pet state out to app.JSX to be able to handle that otherwise, which would be really hard.

[00:04:32]
Last thing, which is kind of interesting sort of feature of this. Because this is going through the React virtual DOM, and the React virtual DOM is different than the normal DOM, right? Because this is nested inside of here inside of the React virtual DOM. Whereas it's not in the inside of the normal DOM.

[00:04:55]
I can actually put an event listener up here and catch events bubbling from here. Let me just make sure that I'm not telling you sweet lies. Yeah, this is gonna get mad for accessibility reasons. Yeah, that which is absolutely correct. You should not put an on click on a div.

[00:05:18]
It's bad idea, Right, which is wild to me, right? So I'm clicking on a modal, right? So this is rendering on a different part of the page. And then I'm clicking here and it's calling the unclick from a different part of the DOM. I don't know why you'd wanna do this, but I do think it is cool, right?

[00:05:46]
Okay. Any questions about modals or portals or refs? We'll talk more about refs and intermediate React. So don't worry so much about that, but in general with refs, if you have something that you need to have the exact same thing every single time that you're using it. The ref is the way to keep track of that over time.

[00:06:11]
And generally, usually has something to do with DOM elements, right? Cuz you want to have access to a specific DOM element, refs are useful for that. Anything else? Cool, I think portals are extremely useful cuz I used to have to write modals and stuff the old way.
>> How do you pass the button click info back to the parent, which button was clicked?

[00:06:41]
>> Sure. So we were in here. I have two buttons here, or even here. I think that's probably, well, let's do buttons cuz that's what we're talking about. Let's say we wanted to have an unclick on here on this div, or this one here on click equals, This is just a normal, you can treat it like a normal DOM event.

[00:07:16]
So you can just say console.log(e.current Target, well, just (e.currentTarget will be fine, right? And now if I re-click on this, Console, I save this refresh again. Adopt Luna Or I guess this would be target then. Let's try that one more time. I'm trying to remember exactly the way that you would do this.

[00:08:01]
All right, let's just log.e. Anyway it's gonna be on the event itself. So you can see this is a synthetic base event. So it's a fake event coming from React. And I forgot about this, so whenever you're doing things like logging out events and stuff like that, it'll zero it out for you because it doesn't wanna hold on to references for you.

[00:08:23]
Which can be annoying and Chrome lazily evaluates those display things. Anyway, diff buttons, view, React name, unclick target. So in other words, you would just introspect the event. If you were doing something like higher level than that, but a much easier way of handling that would be just have different onClicks here, right?

[00:08:59]
So unclick here equals, And now if I click Yes here, it's gonna say yes. Or if I click no, then it's gonna close it, right? So you would just have different unclicks for every event on there. So that's probably the easiest way to do that.