Rendering Outside the DOM Hierarchy with Portals

Snippet

Rendering Outside the DOM Hierarchy with Portals

Portals provide a way to render children into a DOM node that exists outside the DOM hierarchy of the parent component. This is critical for UI elements like modals, tooltips, or floating menus that should not be clipped by 'overflow: hidden' or affected by 'z-index' in the parent.

snippet.js

javascript

import { createPortal } from 'react-dom';
 
function Modal({ children }) {
  return createPortal(
    <div className="modal-overlay">
      {children}
    </div>,
    document.getElementById('modal-root')
  );
}

react

Breakdown

createPortal(children, document.getElementById('modal-root'))

Takes the React children and a target DOM element to render them into.

Previous snippet Next snippet

More Intermediate JavaScript exercises →

From your library

Rendering Outside the DOM Hierarchy with Portals

Related