React Basics

React ES6

React Hooks

React Portals

React Portals

What you'll learn

  • Understand the main ideas in React Portals.
  • See a working example and explanation to help you learn by doing.
  • Follow a clear path to the next lesson in this topic.

When to use this lesson

Use this lesson when you want to understand the key concepts behind React Portals.

❮ Previous Next ❯

React Portals

Portals provide an elegant, first-class way to seamlessly render children into a completely separate DOM node that exists fully outside the DOM hierarchy of the parent component. This is especially vital and heavily utilized for overlapping UI elements like modals, tooltips, and hover cards.

Creating a Portal

You use the ReactDOM.createPortal(child, container) function to establish a portal correctly.

import { createPortal } from 'react-dom';


function Modal({ children }) {
  return createPortal(children, document.getElementById('modal-root'));
}

❮ Previous Next ❯