What are portals in React?

A Portal is a React feature that enables rendering children into a DOM node that exists outside the parent component's DOM hierarchy, while still preserving the React component hierarchy. Portals help avoid CSS stacking issues—for example, elements with position: fixed may not behave as expected inside a parent with transform. Portals solve this by rendering content (like modals or tooltips) outside such constrained DOM contexts.

ReactDOM.createPortal(child, container);

• child

  : Any valid React node (e.g., JSX, string, fragment).

• container

  : A real DOM node (e.g.,

  document.getElementById('modal-root')

  ).

Even though the content renders elsewhere in the DOM, it still behaves like a normal child in React. It has access to context, state, and event handling.

Example:- Modal:

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

The above code will render the modal content into the body element in the HTML, not inside the component's usual location.