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

Well done!

You have completed What's New in React 16!

Sign up for Treehouse Back to Library

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