CODEWITHSUNDEEP
reactjsreact-component
sander
sander

Reputation: 1654

Portal inside Fragments?

Is it possible to use ReactDOM.createPortal inside <React.Fragment> with another element that is rendered to where the component is rendered or am I doing something wrong here?

class Component extends React.Component{
    render(){
        return (
            <React.Fragment>
                ReactDOM.createPortal(<h1>Hello</h1>, 
                                      document.getElementById('side'))
                <h1>Hello</h1>
            </React.Fragment>
        );
    }
}

Upvotes: 0

Views: 565

Answers (1)

Shubham Khatri
Shubham Khatri

Reputation: 281892

Yes it is entirely possible, you just need to wrap React.createPortal within {} like

class Component extends React.Component{
    render(){
        return (
            <React.Fragment>
                {ReactDOM.createPortal(<h1>Hello</h1>, 
                                      document.getElementById('side'))}
                <h1>Hello</h1>
            </React.Fragment>
        );
    }
}

Working codesandbox

Upvotes: 1

Related Questions