Heads up! To view this whole video, sign in with your Courses account or enroll in your free 7-day trial. Sign In Enroll

What's New in React 16

Preview

Start a free Courses trial
to watch this video

Sign up for Treehouse

Render Children into Other Dom Nodes with Portals

6:35 with Guil Hernandez

React 16 introduces a new way of rendering into the DOM. You can render children into a DOM element that exists outside of your App's main DOM tree, with a new feature called “portals.”

Resources

Related Discussions

Have questions about this video? Start a discussion with the community and Treehouse staff.

Sign up

    Related Discussions

    Have questions about this video? Start a discussion with the community and Treehouse staff.

    Sign up

    React16 introduces a new way of rendering into the DOM. 0:00
    You can render children into a DOM element that exists 0:04
    outside of your apps main DOM tree with a new feature called Portals. 0:07
    For example, in your index.html template, you'll usually have a div with the id 0:11
    root, which is where your entire app is rendered into the DOM via ReactDOM.render. 0:17
    Well, to create a portal, you add a second element that's a sibling of your root div. 0:23
    So I'll create a div with the id my-portal. 0:29
    Then you can render specific parts of your component tree inside 0:37
    the sibling div with the new createPortal function. 0:41
    Over in app.js inside the App div, I'll create 0:45
    a JavaScript expression with a set of curly brackets. 0:50
    Then call ReactDOM.createPortal. 0:55
    Since I'm calling ReactDOM.createPortal, 1:04
    I'll need to import ReactDOM from ReactDOM at the top of app.js. 1:08
    The create portal function accepts two arguments, child and container. 1:19
    The first argument child is the content you want to render. 1:24
    So I'll render an <h1> with the text Hello from inside the portal!</h1>. 1:29
    The second argument container is the DOM element 1:40
    where the content is going to render. 1:44
    So to render the h1 inside the my-portal div, 1:47
    I'll pass it document.getElementById and 1:52
    specify the my-portal id. 1:58
    So now we see the h1 content in the app and when I inspect the page in Dev Tools, 2:04
    notice how the h1 is being rendered outside of the main app component. 2:12
    The portal is rendering it inside the my-portal div. 2:17
    So, as you can see, 2:21
    createPortal provides a hook into HTML that's outside the root div. 2:22
    As mentioned in the React docs, 2:31
    portals are useful when a parent component has an overflow hidden or 2:33
    z-index style, but you need the child to visually break out of its container. 2:37
    So a handy use case for portals is when creating modal windows or overlays. 2:42
    In the project files, I've setup a component named Modal. 2:47
    So in the return statement, 2:52
    I'll create a portal with ReactDOM.createPortal. 2:55
    I'll pass it this.props.children as the child argument. 3:03
    And once again, 3:11
    document.getElementByID('my-portal') as the container argument. 3:12
    So I'll simply copy it from app.js. 3:17
    Since this Modal component returns a portal via createPortal, 3:22
    you can place it anywhere in your app and 3:26
    it will always render its children inside the my-portal div. 3:28
    For example, I'll import Modal in app.js, with import Modal 3:32
    from '.components/Modal'. 3:42
    And the return statement I'll delete the portal we created earlier, 3:48
    then I'll render the Modal by including the Modal component. 3:53
    As the Modal content, I'll add a div with the class modal. 4:01
    And inside the div, the text, This is the Modal Window. 4:12
    I have already written the CSS for the Modal class in the stylesheet, so 4:21
    in the browser we see the the Modal Window overlay the entire page. 4:26
    Even though the Modal portal is defined and created from within the app component, 4:31
    it is rendered outside the component, as you can see here in Dev Tools. 4:38
    It's rendered inside the my-portal div. 4:42
    What's interesting about portals is that 4:48
    the components they render are recognized as regular child components of the app. 4:51
    In other words, even though portal can be anywhere in the DOM tree, 4:56
    it behaves like a normal React child in every other way. 5:00
    For instance, an event triggered from inside a portal still propagates or 5:03
    bubbles up to the parent component. 5:09
    For example, I'll add a handleClick method to the app component that logs, 5:11
    I was clicked to the console. 5:16
    Then I'll give apps main app div and 5:30
    onClick event that calls the handleClick method. 5:32
    And inside the Modal component I'll include the button with the text Close. 5:39
    The button is being passed through the portal, so 5:49
    you'll see it rendered inside the my-portal div. 5:53
    We added the onClick to the parent app div inside root, so 5:58
    the elements are not ancestors in the DOM tree. 6:03
    But notice in React Dev Tools that the content passed through the portal 6:06
    still exists in the React tree, regardless of its position in the DOM tree. 6:12
    The Modal component is still a child of app. 6:16
    So clicking the button logs, I was clicked to the console. 6:20
    The click event bubbles up and is caught by the parent app component's onClick. 6:26
    It triggers the handleClick method regardless of whether it's 6:30
    inside a portal, neat. 6:33

    You need to sign up for Treehouse in order to download course files.

    Sign up

      You need to sign up for Treehouse in order to set up Workspace

      Sign up