The Nifty Solution to a Messy Problem

If you've ever sat down to create a Modal then you probably must have faced a hard time. Cause how do you build a Modal, to show up on clicking another component? If you build it inside the button component it goes haywire.

Thankfully React has a nifty solution for this! Lemme teleport you there

React Portal : The Nemesis of Z-Index

A traditional modal will require CSS properties like overflow:hidden and z-index to avoid going haywire and let's be honest, it feels like a hacky solution.

So who is the right solution?

No points for guessing : React Portal

React Portal is the angel sent from "React Library" to help you render a child components into a DOM Node separate from your parent node.

Went over the head? Okay let me explain

The Magician's Secret : The Working

So we have our normal page on the screen , now what React Portal does is create another DOM Node as represented in blue, which is on top of our parent Node and thus our Modal shines unhindered by the constraints of its parents.

The Implementation

Now that you've understood how that works let's move onto the implementation.

First Step : Creating the DOM Node

Go to your index.html and add another node along with the existing root node as shown below:

    <div id="root"></div>
    <div id="portal"></div>
    <script type="module" src="/src/main.jsx"></script>
  </body>

This creates another node different from the root node but at the same level as root.

Second Step : The Modal Component

Now we're gonna make use of Portal so let's understand it's syntax once. ReactDOM.createPortal( Child, Container )

The ReactDOM.createPortal function takes in the child component, which in this case is the Modal, and the second parameter is the element onto which this JSX component should be rendered onto. So we provide the DOM location(node) to which the portal should be injected.

Here's an example of a component I created :

import React from "react";
import ReactDOM from "react-dom";

export const Modal = ({ openModal, setOpenModal, children }) => {
  return ReactDOM.createPortal(
    openModal ? (
      <div className="Modal fixed top-1/2 left-1/2 z-30 w-full -translate-x-1/2 translate-y-1/2  ">
        {children}
      </div>
    ) : null,
    document.getElementById("portal")
  );
};

The openModal and setOpenModal is simple useState to help us control the opening/closing of the modal.

And there you go! You have successfully created a Modal using React Portal, which will enclose all the children that you pass onto it.

Not only is this more simpler and convenient, let's get into the functional advantages of using a Portal.

Things to consider when using Portals

When using React Portals, there are several areas you should be aware of and these behaviors are not visible directly unless you dive deep and get to know the how's and why of everything which I really suggest you look into.

1. Event Bubbling will work as usual — Event bubbling will work as expected by propagating events to the React tree ancestors, regardless of the Portal node location in the DOM.
2. Portals only affect the DOM structure — Portals only affect the HTML DOM structure and do not impact the React components tree.

Conclusion

Hope I helped you teleport to the other side. You no longer have to go to z-index for creating Modals. Welcome to the Light Young Jedi!