React Deep Dive: From Beginner to Advanced/

...

/

Portals and Their Relationship to Their Parent Component

Portals and Their Relationship to Their Parent Component

Have a look at a real-life use case of portals and see how they are linked to their parent component.

We'll cover the following...

To further our understanding of portals, we are going to build a modal portal. The basis is formed by the following HTML:

Press + to interact
<!doctype html>
<html>
    <head>
        <title>React App</title>
    </head>
    <body>
        <noscript>You need to enable JavaScript to run this app.</noscript>
        <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>

There are two divs in the example, one in which our application is rendered and another in which we render the portal. ...