Portal inside Fragments?

Question

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>
        );
    }
}

Answer 1

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