Creating Portals
Learn how to render child components into a DOM node outside of the parent DOM hierarchy.
We'll cover the following...
Creating a portal using createPortal()
Creating a portal is relatively simple compared to other concepts we have learned about so far. The component that intends to use the portal has to call the createPortal() method from ReactDOM and pass in a valid component as the first parameter and an existing destination node as the second parameter.
The following example shows a common HTML snippet using portals:
<!doctype html>
<html>
<head>
<title>Portals in React</title>
</head>
<body>
<div id="root"><!-- this is where our React App is located -->
</div>
<div id="portal"><!-- this is where the content of the portal will be stored -->
</div>
</body>
</html>