Teleporting Elements with React Portals

Snippet

Teleporting Elements with React Portals

Portals allow you to render components into a different part of the DOM tree, outside the parent's hierarchy. This is essential for UI elements like modals or tooltips that need to break out of 'overflow: hidden' or 'z-index' constraints while still maintaining React's event bubbling and state behavior.

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

import { createPortal } from 'react-dom';

Imports the specialized method from the react-dom package for portal creation.

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

Takes the React children and a target DOM node where the children should be mounted.

Previous snippet Next snippet

More Intermediate JavaScript exercises →

From your library

Teleporting Elements with React Portals

Related