`createPortal`

Renders children into a different part of the DOM tree.

Since React 16.0 Spec ↗

Syntax

createPortal(children, domNode, key?)

Parameters

Name	Type	Required	Description
`children`	`node`	Yes	The React content to render through the portal.
`domNode`	`Element`	Yes	The DOM node to render the children into.
`key`	`string`	No	Optional key for the portal element.

Returns

element — A portal element to include in the render output.

Examples

import { createPortal } from 'react-dom';

function Modal({ children }) {
  return createPortal(
    <div className="modal">{children}</div>,
    document.body
  );
}

Notes

The children render into another DOM container but remain in the React tree for context, state, and event bubbling. Events bubble to React parents, not the DOM ancestors of the portal target. Common for modals, tooltips, and toasts that must escape overflow or stacking contexts.