Understanding React portals

React portals allow us to render child components in a different DOM element outside of the DOM tree generated by the parent component while keeping the React tree as if the component is inside the DOM tree generated by the parent component. For instance, even though child components are located in a different DOM node, the events generated in a child component bubble up to the React parent component.

React portals are created using the ReactDOM library's createPortal method and it has the same signature as the render method:

ReactDOM.createPortal(  
    ReactComponent, 
    DOMNode,  
) 

However, the difference between render and createPortal is that the latter returns a special tag that is used in the React tree to identify this element as a React portal and to use it as if it were a React element. For instance:

<article> 
   {ReactDOM...