snippets/react-spreading-props-21-06-2022.html

<body>
    <div id="root"></div>
    
    <script src="https://unpkg.com/react@18.1.0/umd/react.development.js"></script>
    <script src="https://unpkg.com/react-dom@18.1.0/umd/react-dom.development.js"></script>
    <script src="https://unpkg.com/@babel/standalone@7.12.4/babel.js"></script>
  
    <script type="text/babel">
  
      const children = "Hello summer☀️"
      const className = "wrapper";
      const props = {children: children, className: className};
      
      // By spreading props, we're doing: <div className={className}/>{children}</div>
      const element = <div {...props} />;
  
      console.log(element)
      
      ReactDOM.createRoot(document.querySelector("#root")).render(element);
    </script>
  </body>