MENU


Inserting into a Different DOM Node

Normally, when you return an element from a component's render method, it's mounted into the DOM as a child of the nearest parent node. However, sometimes it's useful to insert a child into a different location in the DOM.


RESETRUNFULL
<!DOCTYPE html><html><head></head><body>
   <script src="https://unpkg.com/react@17/umd/react.development.js"
                crossorigin></script>
   <script src="https://unpkg.com/react-dom@17/umd/react-dom.development.js"
               crossorigin></script>
   <script src="https://unpkg.com/babel-standalone@6/babel.min.js"></script>
   <div></div>
   <div></div>
   <script type="text/babel">
      function Greeting(props){
         return ReactDOM.createPortal(
            props.children,
            document.querySelectorAll("div")[1]);
      }
      class Demo extends React.Component{
           render(){
               return <Greeting>Hello <b>Ali</b>.</Greeting>;
           }
      }
      ReactDOM.render(<Demo />, document.querySelectorAll("div")[0]);
   </script></body></html>

In addition to a fragment, an element or a string can also be inserted.