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.