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.

This time, however, the modal will only open once a user has clicked a button. The portal will contain a button that allows the user to close the window. A state variable called ...