Search⌘ K
AI Features
Home
Courses
React Deep Dive: From Beginner to Advanced

Creating Portals

Explore how to use React Portals to render components outside their normal parent hierarchy. Learn to implement createPortal, direct rendering targets, and manage portal lifecycles for flexible UI designs.

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>
...