Rendering with React Portals

Snippet

Rendering with React Portals

Portals allow you to render children into a DOM node that exists outside the hierarchy of the parent component. This is commonly used for UI elements like modals, tooltips, and dropdowns to avoid CSS issues with overflow: hidden or z-index.

snippet.js
javascript
import { createPortal } from 'react-dom';
 
const Modal = ({ isOpen, children, onClose }) => {
  if (!isOpen) return null;
 
  return createPortal(
    <div className="modal-overlay">
      <div className="modal-content">
        {children}
        <button onClick={onClose}>Close</button>
      </div>
    </div>,
    document.body
  );
};

react

Breakdown

createPortal(children, document.body)

The first argument is the content to render; the second is the target DOM node outside the current tree.

document.body

A common target for portals, ensuring the element is at the top level of the DOM structure.

Previous snippet Next snippet

More Intermediate JavaScript exercises →

From your library

Rendering with React Portals

Related