This course has been updated! We now recommend you take the Complete Intro to React, v8 course.
Transcript from the "Removing Modals and Q&A" Lesson
[00:00:00]
>> Trying to decide if everyone's just confused or if I just nailed it. I can never tell. Probably somewhere in the middle of both confused and nail, I can nail it in a confusing way or I'm confusingly nailed, I don't know, something like that.
>> Could you repeat?
[00:00:15] I think you said about line 14 the return, I think you said something like the return statement on us effect gets called when we remove the elements or something like I can do.
>> Yeah. Alright, so on this page when you click adopt Luna it's gonna pop up a modal is like do you wanna adopt Luna, right?
[00:00:36] It's like a confirmation modal, right? When you click OK, the modal should go away, right? So we have to remove that DOM element that we put there otherwise it's just gonna keep putting more and more DOM elements there and or not removing it, right? So we need something that's gonna say as soon as this gets removed from my react applicant, as soon as you stop rendering this model, how do I clean myself up?
[00:00:59] The way you do that is whatever function, again, this has to be a function that you return in your effect. Does that make sense? There's a cleanup function.
>> Yeah, I guess I'm just missing, how or where does that get called but it's kind of a deep down.
[00:01:19]
>> So basically you're scheduling this to run. Whatever function you return in effect gets scheduled to be run by react whenever this function gets removed from the DOM.
>> And I think the thing that I'm missing is just like for example, the function to remove this thing from the DOM, we haven't made yet.
[00:01:40] I'm assuming because we haven't even gotten to getting to a model to then truly displaying it.
>> Let's go do that and if you're still confused by let's talk about it then. But basically whenever you stop rendering, right, so let's look it like our error boundary for just a second.
[00:02:03] At some point you're gonna render this and then you're gonna stop rendering it, right, that h2 gets destroyed, right? So you render it when you have an error and then you stop rendering it later, right? So you want some function to be able to be called whenever you stop rendering something, and you basically you're telling react, this is what I need to do to remove myself.
[00:02:22]
>> I guess to be specific, the thing I'm confused about is how do we tell or what tells react to stop rendering a given element?
>> We stopped returning it.
>> Stop returning.
>> Because it keeps track of like, this is what the DOM used to look like, this is what the DOM was about to look like.
[00:02:36] It does a diff, and then it says, okay, all that stuff that's no longer there we're going to remove it, right? It's called the virtual DOM, I guess I haven't talked about the virtual DOM at all during this course. It's good because you'd never have to know or care that it even exists but basically react to doing a diff underneath the hood and it's going to remove stuff that's no longer there and keep stuff that is still there.
[00:03:01] It's kind of implicit I suppose, right, but whenever you stop returning something it'll just stop rendering.
>> Something about it's going over my head but thank you very much.
>> Okay [LAUGH] maybe it'll make sense here in just a second. If use ref is confusing to you, I go into it further in intermediate react, yeah.
[00:03:25]
>> So return function in a use effect equivalent to a component did unmount?
>> Yeah. I'm sure there's some nuanced difference there in terms of like the scheduling of it but functionally is the same. Okay, so let's go to details and use our modal. We're going to import modal from ./modal.
[00:03:50] Okay, we're gonna have a thing here called show modal. Well, yeah, we'll not show it first. We're gonna make a function here to toggle the modal. So we're gonna say toggler modal, I can spell, that's fine. And it's just gonna be a function that all it's gonna do is call this .setstate.
[00:04:19] ShowModal, and it's gonna be the opposite of whatever showModal currently is, so this.state.showModal. So what this function does whenever you call it, we're using an arrow function, right? So to make sure that this year is always correct. If modal is true, make it false, if it's false, make it true.
[00:04:42] So just toggling that back and forth. Okay, let's pull showModal out of our state. Okay, down here on our button we're gonna give it an onClick finally to be this.showModal And then below the description, we're gonna add our show modal logic. So we're gonna put this little bit of logic here.
[00:05:27] If we're gonna show the modal then we're gonna put our modal component here and we're gonna put whatever we want to display inside of that modal. So we're gonna put a div, we're gonna put like an h1, would you like to adopt name. Here we're gonna put an a tag because we're gonna link off site.
[00:06:01] I'm just gonna send you to a real pet adoption side of you and click Yes, if you cannot adopt my dog I'm reiterating that if in case there was an obvious, she's a jerk but she's my jerk, pet-adopt. This will just send you the pet finder. Okay, and if you click no then you're gonna say we're just gonna close the modal, this toggle modal.
[00:06:33] Okay, so if show modal is true the show this otherwisewe just don't wanna show anything, right? We want nothing to render inside of that. So we're just gonna put null, if you tell reactant render null it just doesn't render anything. So that's what the null is here. All right, let me go make sure that works really quick.
[00:07:10] It doesn't, let's figure out why. See that, this is what I did. Put showmodal it's supposed to be togglemodal. Now that styling little dirty, but it looks like it's working just fine. I don't know what I did there. Button on click buttons, I didn't put buttons, did I?
[00:07:50] Yeah, you're supposed to put buttons there. Inside of a div, okay. So here, put a tag in this in here and we'll say className equals buttons. There you go. Now it looks nice. Okay. So let's walk through kind of what happens here. The user clicks the button, I would like to adopt Luna, right?
[00:08:30] It calls the togglemodal button. This says set state to be the opposite of what it currently is. So if it's true, or sorry if it's false, which it is right now, it's gonna set that to true, right? When you call set state or kicks off a rerender. So it does that, calls render again, this time showModal is true whereas before it was false and was just showing no, which is nothing.
[00:08:53] This time t's true. It's gonna use our modal function, our modal component and it's gonna render everything that we put inside of here, right, inside of its modal, okay? And so that's how we get this which is over everything let's actually take a look at the DOM. Notice most of our app is here instead of route right, the header, the details, all that stuff is living inside of route which is where our app is being rendered.
[00:09:24] We have modal here though. Which has div soup and an h1 here and a div and like our age and stuff like that, but it's being rendered outside of the normal DOM right? It's being rendered in different places, despite the fact that the component is all living in one spot.
[00:09:42] So let me explain to you why I think this is even cooler than you might think it be already. One, I am referencing state directly from this component, right? So I don't have to use like Redux to like message the name over and which URL to go to.
[00:09:58] I get to like render it contextually, right, with all the information that I already have from the state here. So one, that's very cool. Two, something else that you wouldn't necessarily expect, if I fire an event here, so let's say I have some sort of, well, let's let's do this.
[00:10:18] Just. Unclick E console.Log e. Is it just getting mad at me for ES lint? Yeah, I think this should work. So, notice that I clicked somewhere on here and event bubbling, right, that react is still lets you do event bubbling even though I don't typically recommend it normally you don't need to.
[00:10:59] Anyway, whatever, it's fine, you can use event bubbling it's available to you. Now, event bubbling should not work on this modal, right, because it lives in a different part of the DOM so therefore it should bubble through a different track. But this because this is reactional this in the same react tree, if I click on this, I still get event bubbling despite the fact that this is here and this is rendering to a different part of the DOM.
[00:11:25] That's wild, right? Cuz it's bubbling through like a portal, right? I think it's kind of cool. The reason why that works is despite the fact that this lives in different part of the DOM tree, it lives in the same React tree. And we're not dealing with the DOM we're dealing with the React synthetic event system.
[00:11:43] So this is actually going through a different tree, despite the fact that they render in different places. I don't know why that would ever be useful. [LAUGH] I'm just technologically impressed by it. Okay, so as soon as I click adopt on Luna here, I click No, and it goes away.
[00:12:10] Right, because here I'm saying toggle modal again, at that point, it arrives back to here. And it removes i from that, right, which is what the modal code that we wrote did. So, I think if you remove this, so let's just remove that. And we refreshed and we clicked the adopt, I just don't think it would go away fully.
[00:12:33] It wouldn't, right? Because nothing's removing that DOM, right? All the React stuff is going away, right? But the actual component there is not, right, so that's what this does is this removes the final div from that container. So now if we go back and try it again and we dropped Luna, no, it fully goes away because that last data is being fully removed from the DOM.
[00:13:07] And yes, if you click, yes, it hopefully it should take you to pet finder. Okay, this is about the most advanced thing that I can teach you in react in terms of like, things conceivably you might need to use. There's a bunch of like more advanced stuff to do in react but it's almost all for like library authors.
[00:13:31] So like if you're writing like styled components or a motion or something like that, they have some additional lower level hooks that you can use. You almost never need to use them. But ref can be useful sometimes, portals can be useful, maybe a handful of other things, but pretty much everything else you don't have to worry about.
[00:13:51]
>> I have a question about the rendering of the modal, but I'm not exactly sure how to word it. But it has to.
>> Just go for it.
>> It has to do with the cleanup that we're doing. I know we're using that use effect to destroy it but we get that like split second where we clear out the content in React and then we destroy the actual child and the DOM.
[00:14:17] why do we need to clear out that content? Couldn't we just destroy the child and the DOM? Does that kind of make sense?
>> I think so. So when you simply unrender the modal, why do you have to go one step further and delete the parent element?
>> I think so.
[00:14:43]
>> Basically, we have to hand something to react as like you can render into this, right? That's what this create portal does is we're saying this Lref.current which is this div that we create and then later destroy, right? We're handing this to react was like here's your place to render, right?
[00:15:00] So we have to create one so that later we can render into it. And then later when we go back to unrender that modal we have to then destroy it or we end up with that problem where you saw where the outer most diff doesn't go away. But it's basically creating a container for reactors like here's your safe place, and then you just burn the safe place to the ground.
[00:15:27] I'm mixing analogies here, but it's necessary technical constraint, it's a weird API. I'm gonna be the first one to tell you that but that's where they found that they could do it that was like performance and useful. I don't know if I have a better answer than that, but good question.
[00:15:56] For refs, let's say you work at a company and has like a bunch of legacy infrastructure that was all built in jQuery, right, I've worked at several companies like that. I had to write connecting layers between react and jQuery to get take react state and somehow pass it into like a jQuery plugin.
[00:16:18] So I imagine some of you unfortunately will probably have to do that or like when you're migrating between a legacy Angular application to a new React application, you have to do some sort of interrupt. Ref, so your best friend. So basically what you can do is you can have your react element wrap like a angular mini app, right?
[00:16:39] And you can use a ref to reference a DOM element that you can tell angular or backbone or jQuery to render into, right? And then you can pass data from your React application into whatever DOM elements that you have created for Angular or whatever or jQuery, right? So this kind of pattern you probably wouldn't even use a portal, right, but you'd be using refs, right?
[00:17:05] So I won't get too much more into it than that but just know that refs are super useful for interoperability between react and other libraries. Definitely never do that on purpose, right? But sometimes we it's necessary for interoperability between like in migration kind of situations. Yeah, Mark.
>> What about being able to click outside the modal?
[00:17:33]
>> Yeah, good question. And that stuff you would all handle here in modal, I kind of kept modal this most simple possible. I guess what you would do is you'd pass into modal, you could pass in like the Togglemodal function. Let's just see if I can do it really quick.
[00:17:55] And here, you pass into your modal. Sorry, not here it's in details. ToggleModal equals don't, stop it. Okay, and so now here inside of modal, I now have this function that I got for my parent, that allows me to toggle the modal whenever I need to So here what I would have to do is have to like restructure the CSS in such that, if I could make that a React component that I could click on and therefore remove.
[00:18:44] I don't think this is gonna work. We'll see what happens. So it's not this it's just Togglemodal. Yeah, so you'd have to make, like right now I'm using that outermost div that we're adding and removing to the DOM and that's what I'm rendering with the black there. I'd have to like, make one more layer on top of that so that I could actually make this black area clickable and then I could say this .Togglemodal.
[00:19:20] So, I would pass in a event handler from the parent into the child and then I would do it that way. That's how you would do it. But I don't wanna make you wait for ten minutes while I figure out my damn CSS, no one wants to watch.
[00:19:38] That is not entertaining TV.