What is createPortal()?

Recently, I ran into a tricky UI issue in React… but then I found createPortal() and it saved the day! 🚀
#

I was working on a modal that needed to overlay everything—including elements with overflow: hidden or z-index constraints. But no matter what I tried, my modal was getting trapped inside its parent container. 😩

Then I discovered ReactDOM.createPortal(), and wow—this was exactly what I needed! It lets you render a component outside its normal React hierarchy, meaning I could place my modal directly inside document.body and avoid all those layout issues.

What is createPortal()?

Normally, React components render inside their parent DOM tree. But createPortal() lets you render a component somewhere else in the DOM while keeping its React state and event handling intact.

Here’s a simple example:

import React from "react";

import ReactDOM from "react-dom";
const Modal = ({ children }) => {
return ReactDOM.createPortal(
<div className="modal">{children}</div>,
document.getElementById("modal-root") // This is outside the main app root
);
};
const App = () => {
const [show, setShow] = React.useState(false);
return (
<div>
<button onClick={() => setShow(true)}>Open Modal</button>
{show && (
<Modal>
<div className="modal-content">
<p>This modal is rendered outside the normal DOM hierarchy!</p>
<button onClick={() => setShow(false)}>Close</button>
</div>
</Modal>
)}
</div>
);

};

Why use createPortal()?

✅ Avoids overflow: hidden and z-index issues
✅ Keeps event propagation intact
✅ Useful for modals, tooltips, popups, and dropdowns

If you’ve ever struggled with UI elements getting trapped inside containers—give createPortal() a try! It’s a game-changer. 💡

Have you used createPortal() before? What’s your experience with it? Let’s discuss in the comments! ⬇️