title: JS to React without JSX button
body: <p>I'm trying to translate <a href="https://www.w3schools.com/howto/tryit.asp?filename=tryhow_css_menu_icon_js" rel="nofollow noreferrer">this code</a> into React without <em>JSX</em> code.</p>
  <p>And this is what i try:
  <a href="https://codepen.io/yaminox/pen/Pozzrwv" rel="nofollow noreferrer">https://codepen.io/yaminox/pen/Pozzrwv</a></p>
  <p>but the button wont &quot;auto-render&quot; .</p>
  <pre><code>   &lt;head&gt;
          &lt;script src=&quot;https://unpkg.com/react@16/umd/react.production.min.js&quot;&gt;&lt;/script&gt;
          &lt;script src=&quot;https://unpkg.com/react-dom@16/umd/react-dom.production.min.js&quot;&gt;&lt;/script&gt;
          &lt;style&gt;
              .container {
              display: inline-block;
              cursor: pointer;
              }
  
              .bar1, .bar2, .bar3 {
              width: 35px;
              height: 5px;
              background-color: #333;
              margin: 6px 0;
              transition: 0.4s;
              }
  
              .change .bar1 {
              -webkit-transform: rotate(-45deg) translate(-9px, 6px);
              transform: rotate(-45deg) translate(-9px, 6px);
              }
  
              .change .bar2 {opacity: 0;}
  
              .change .bar3 {
              -webkit-transform: rotate(45deg) translate(-8px, -8px);
              transform: rotate(45deg) translate(-8px, -8px);
              }
          &lt;/style&gt;
          &lt;script&gt;
              class MainMenu extends React.Component
              {   
  
                  constructor() {
                      super();
                      this.state = { 
                          menu_is_open: false 
                      };  
                      this.toggle_menu = this.toggle_menu.bind(this);
                  };
                  
                  mainButton(){
                  let re = React.createElement; 
                  let _style = &quot;&quot;;
                  if (this.state.menu_is_open == true) _style = &quot; change&quot;;
                  let classCSS = &quot;container&quot; + _style;
                  let attr = {class: classCSS, onClick: this.toggle_menu}
                  let result = re('div', attr,
                      re('div', { class : 'bar1' }),
                      re('div', { class : 'bar2' }),
                      re('div', { class : 'bar3' }),
                  )
                  return result
              }
  
              toggle_menu(){
                  console.log('open_menu ' + this.state.menu_is_open );
                  this.state.menu_is_open = !this.state.menu_is_open;
                  this.render() /* the button wont change  */
              }
  
              render()
              {   
                  let mainMenu = this.mainButton();
                  return mainMenu;
              }
          }
  
          window.onload = function()
          {
              const re = React.createElement; // re = react element
              
              ReactDOM.render(
                  re('header', null,
                      re(MainMenu, {}),
                  ),
                  document.getElementById('header')
              );
          }; 
          &lt;/script&gt;
      &lt;/head&gt;
      &lt;body&gt;
          &lt;header id=&quot;header&quot;&gt;&lt;/header&gt;
      &lt;/body&gt;
  </code></pre>
  <p>Thanks a lot!!</p>