React Portals — appending DOM nodes outside the component

One of the newest features in React is Portals. Portals allow to append DOM nodes outside of the component that is supposed to render them. Some use cases for this can be tooltips or modals. Basically, content that we don’t want to be limited by a parent element but rendered somewhere else in the DOM.

Example:

In the constructor we reference a DOM node already created by its id (portal). In the render method a div with non-portal id is returned and inside it we create a Portal that will append newElement into the DOM node marked with the portal id. View from the DevTools:

The newElement is not rendered in the component that created it but taken under the div that we created reference for (this.nodeElement).

Without using Portals:

Result:

Check out more examples and description here.