Current section: Portals 36 exercises
solution

createPortal

Loading solution

Transcript

00:00 Let's start out by making sure we have this overflow hidden set. So our cards are doing what they're supposed to. And then inside of tooltip TSX, we've got this tooltip container that's responsible for rendering our tooltip where it's supposed to go and all of that. This needs to be inside a create portal.

00:18 So we're going to call create portal, pull that from React DOM. So that updates our import right there. And this create portal needs a second argument that's saying, where do you want this portal to go? Document.body, that's where I want it to go. And now everything's positioned where it's supposed to be, hooray.

00:37 Now you'll notice that it's getting chopped off on the edge here. And this is because you should use a library for stuff like this. I wanted to keep it simple. This is also borrowing some code from the React docs directly as well. And keeping it a little bit simple, typically you're going to want to use a library for this sort of thing.

00:55 But like I said, not a terribly difficult thing to do. The libraries are probably doing the same sort of thing with create portal. You still can pass props to things and not worry about having to throw it over the fence over to wherever it's rendered. You just render it right where you want it. And then you can say where specifically you want the DOM nodes to go.

01:16 Pretty handy feature.