This course has been updated! We now recommend you take the Complete Intro to React, v8 course.
Transcript from the "Implementing Modals" Lesson
[00:00:00]
>> Let's go implement this. Let's go into this in detail such as. Whenever the user clicks adopt, I want to show them like, are you sure you want to adopt this animal, right?. You don't want people just haphazard like, I adopted a pet right?. I don't know. Depends on I guess your goals if you want to get it, all of them adopted immediately.
[00:00:21] He might just auto click it for him. I'll just mail him a dog. It's bad idea. Don't do that. Okay, so we're gonna import modal at the top import modal from ./ modal state. We're going to add another one called show modal false. We're gonna add 2 methods here.
[00:00:54] And the 1st method is gonna be called toggle modal. And it's gonna be really simple, It's just gonna say this set state. And show Modal is gonna be whatever the opposite of show Modal is this set State. Right?. So if it's true, make it false. If it's false, make it true.
[00:01:25] And then we're gonna add another button for adopt. So what are we going to do if they actually adopt it. Adopt?. Here you'd have some logic of call the API, let the shelter know that this pets been adopted. Here I'm just going to Window dot location, send you to a website that will actually let you adopt pets.
[00:01:49] So Bitly/pet_ adopt. That's just gonna send you to pet finder and you can adopt a pet there. Okay. So. What we're gonna do on our button here we're gonna add an on Click. And on Click we're just going to toggle modal this, toggle modal. So because inherently if they click this button, it's not showing it's gonna show it.
[00:02:33] And then underneath description, I mean really we can put this anywhere because it's gonna render outside of itself. We're just gonna say, hey, if show modal. Then render this. Inside of a modal. Div, Each one, would you like to adopt name?. And then div, class name equals buttons.
[00:03:17] Buttons, 1st one is gonna be on Click, equals this started dot. Yes. And then we'll have another one for this toggle model, which is mean they click No. So we're going to hide it at that point. No. I'm just kidding you can put whatever you want, there. Okay, and if show modal is not true then what you just want to do is put colon no.
[00:03:59] Yeah, and this one has to be this dot state, where you can pull it out of here. So up here underneath and where we're pulling out all everything from the state, you just have to pull out show modal as well. Right?. Cuz we're pulling that out of state so we can use it, then down here we're seeing if show model is true.
[00:04:19] Render all this stuff in a modal. And then the nice thing react can handle if you give react no, it's just like, okay, don't render anything, right. In this particular case, if we don't want to show a model, don't render anything. For that particular piece. That makes sense?.
[00:04:38] That's interesting talking about this set State show Modal, I put set State here, just this state show Modal. That's hilarious that works that way. Yeah, I mean, it makes sense, the wonders of JavaScript. So line 26 here, this dot State dot, show modal hopefully you've just got that right.
[00:05:03] I had set state here on accident, but it should just be state. Okay. Now if we refresh and try again, click No. There you go. Now it hides it. And then if you click yes, it'll take you to somewhere to adopt a pet.
>> Can we use the context for the theme context for this as well, or do we have to create it from scratch?.
[00:05:32] Cuz these buttons were, I think read.
>> Yeah. You could absolutely wrap this on a theme consumer, we could do exactly what we did here and put that here right. And that would color those buttons those particular way.
>> Okay, thank you.
>> Good question. So the part that I just wanna point out to you, that really cool, that's kind of easy than this.
[00:05:58] I'm calling this.adopt, this.toggleModal. Those are features of the details component, right?. And I'm referencing name, and I could reference all sorts of other stuff. But like, think of where this lives in the DOM, right?. So if I inspect element here, Like I have modal here, right, but the app actually lives in route, so it's actually living outside of routes.
[00:06:23] I'm referencing state in a different part of the application calling functions from a different part of it. What's even like kind of wild here is if I put like a event listener up here on details, I can listen for events that happen in modals. Because it's actually react synthetic event system, that's handling those events.
[00:06:43] Right, so you can actually use event bubbling inside of react, and have a bubble out of portals and back into like the normal parts of the DOM. It's kind of wild stuff, it actually is occasionally useful. So it's an advanced use case. It's not something you always need to use, but when it's useful, it's very useful.
[00:06:59] Is there any like performance considerations, or any probably just downfalls of using portals?. I think the answer that's No, I don't think there's any performance hit by using portals. I'm not going to give you hard and fast rules because there's going to be occasions, that you're going to want to do one thing versus another.
[00:07:15] But performance is not going to be consideration here. Even in like high performance, kind of Situation a portal acts just as well as anything else. I mean the only machination that's going on that's a little bit more different, is the fact that it's having to create and destroy disk but I guess it has to do that anyway.
[00:07:38] So there's no performance, sorry I had to, you were my rubber ducky I had to rubber duck that aloud. Yeah, there's no reason for that. So I would suggest just doing it this way.