title: React Component doesn't show
body: <p>All code compiles without errors but my React Component <code>NestedMenu</code> doesn't show up in the browser. I don't trust the compiler though and I suspect that there is some syntax error that I am missing. I am a beginner at React JS so maybe there is a syntax error I have made or some other mistake that is not easy for me to see. Maybe I can't call <code>React.createRef()</code> in the list. But I need the <code>refs</code> later to call functions in the buttons.</p>
  
  <p>main.js:</p>
  
  <pre><code>import React from 'react';
  import ReactDOM from 'react-dom';
  import NestedMenu from './NestedMenu.jsx';
  
  ReactDOM.render(&lt;NestedMenu /&gt;, document.getElementById('nestedmenu'));
  </code></pre>
  
  <p>index.html:</p>
  
  <pre><code>&lt;!DOCTYPE html&gt;
  &lt;html lang = "en"&gt;
  
     &lt;head&gt;
        &lt;meta charset = "UTF-8"&gt;
        &lt;title&gt;Nested Menu&lt;/title&gt;
     &lt;/head&gt;
  
     &lt;body&gt;
        &lt;div id = "nestedmenu"&gt;&lt;/div&gt;
        &lt;script src = "index.js"&gt;&lt;/script&gt;
     &lt;/body&gt;
  
  &lt;/html&gt; 
  </code></pre>
  
  <p>NestedMenu.jsx:</p>
  
  <pre><code>import React from 'react';
  
  class NestedMenu extends React.Component {
      constructor(props){
          super(props);
  
          buttonsArgsList = [
                              { id: 0, width: 100, height: 25, botbradius: 5, topbradius: 5, text:'Computer', tcolor:'#FFFFFF', bgcolor:'#101010', flashcolor:'#202020', bcolor:'#050505', bwidth: 3, expands:2, link:'null', ref:React.createRef()},
                               { id: 1, width: 100, height: 25, botbradius: 5, topbradius: 5, text:'Desktop', tcolor:'#FFFFFF', bgcolor:'#151515', flashcolor:'#252525', bcolor:'#050505', bwidth: 3, expands:2, link:'null', ref:React.createRef()},
                                { id: 2, width: 100, height: 25, botbradius: 5, topbradius: 5, text:'PC', tcolor:'#FFFFFF', bgcolor:'#202020', flashcolor:'#303030', bcolor:'#050505', bwidth: 3, expands:3, link:'null', ref:React.createRef()},
                                 { id: 3, width: 100, height: 25, botbradius: 5, topbradius: 5, text:'HP', tcolor:'#FFFFFF', bgcolor:'#252525', flashcolor:'#353535', bcolor:'#050505', bwidth: 3, expands:0, link:'null', ref:React.createRef()},
                                 { id: 4, width: 100, height: 25, botbradius: 5, topbradius: 5, text:'DELL', tcolor:'#FFFFFF', bgcolor:'#252525', flashcolor:'#353535', bcolor:'#050505', bwidth: 3, expands:0, link:'null', ref:React.createRef()},
                                 { id: 5, width: 100, height: 25, botbradius: 5, topbradius: 5, text:'ASUS', tcolor:'#FFFFFF', bgcolor:'#252525', flashcolor:'#353535', bcolor:'#050505', bwidth: 3, expands:0, link:'null', ref:React.createRef()},
                                { id: 6, width: 100, height: 25, botbradius: 5, topbradius: 5, text:'MAC', tcolor:'#FFFFFF', bgcolor:'#202020', flashcolor:'#303030', bcolor:'#050505', bwidth: 3, expands:0, link:'null', ref:React.createRef()},
                               { id: 7, width: 100, height: 25, botbradius: 5, topbradius: 5, text:'Laptop', tcolor:'#FFFFFF', bgcolor:'#151515', flashcolor:'#252525', bcolor:'#050505', bwidth: 3, expands:3, link:'null', ref:React.createRef()},
                                { id: 8, width: 100, height: 25, botbradius: 5, topbradius: 5, text:'PC', tcolor:'#FFFFFF', bgcolor:'#202020', flashcolor:'#303030', bcolor:'#050505', bwidth: 3, expands:3, link:'null', ref:React.createRef()},
                                 { id: 9, width: 100, height: 25, botbradius: 5, topbradius: 5, text:'DELL', tcolor:'#FFFFFF', bgcolor:'#252525', flashcolor:'#353535', bcolor:'#050505', bwidth: 3, expands:0, link:'null', ref:React.createRef()},
                                 { id: 10, width: 100, height: 25, botbradius: 5, topbradius: 5, text:'ASUS', tcolor:'#FFFFFF', bgcolor:'#252525', flashcolor:'#353535', bcolor:'#050505', bwidth: 3, expands:0, link:'null', ref:React.createRef()},
                                 { id: 11, width: 100, height: 25, botbradius: 5, topbradius: 5, text:'HP', tcolor:'#FFFFFF', bgcolor:'#252525', flashcolor:'#353535', bcolor:'#050505', bwidth: 3, expands:0, link:'null', ref:React.createRef()},
                                { id: 12, width: 100, height: 25, botbradius: 5, topbradius: 5, text:'MAC', tcolor:'#FFFFFF', bgcolor:'#202020', flashcolor:'#303030', bcolor:'#050505', bwidth: 3, expands:0, link:'null', ref:React.createRef()},
                                { id: 13, width: 100, height: 25, botbradius: 5, topbradius: 5, text:'Chrome book', tcolor:'#FFFFFF', bgcolor:'#202020', flashcolor:'#303030', bcolor:'#050505', bwidth: 3, expands:0, link:'null', ref:React.createRef()}
                           ];
  
          buttonsList = buttonsArgsList.map((button) =&gt;
              &lt;li&gt;
              &lt;MenuButton key={button.id.toString()} 
                          ref={button.ref} 
                          width={button.width}
                          height={button.height}
                          tcolor={button.tcolor}
                          bgcolor={button.bgcolor}
                          flashcolor={button.flashcolor}
                          bcolor={button.bcolor}
                          bwidth={button.bwidth}
                          botbradius={button.botbradius}
                          topbradius={button.topbradius}
                          text={button.text}
                          expands={button.expands}
                          link={button.link}
              /&gt;
              &lt;/li&gt;
          );
      }
  
     render() {
        return (
           &lt;div&gt;
              COME ON SHOW THIS!
           &lt;/div&gt;
        );
     }
  }
  
  class MenuButton extends React.Component {
      constructor(props){
          super(props);
  
          this.state = {
              bgcolor: this.props.bgcolor,
              relypos: 0,
              relxpos: 0,
              botbradius: this.props.botbradius,
              topbradius: this.props.topbradius
          };
      }
  
      render(){
          var menubuttonstyle = {
              color: this.props.tcolor,
              backgroundColor: this.state.bgcolor,
              width: this.props.width,
              height: this.props.height,
              position: 'relative',
              top: this.state.relypos,
              left: this.state.relxpos,
              borderColor: this.props.bcolor,
              borderWidth: this.props.bwidth,
              borderTopLeftRadius: this.state.topbradius,
              borderTopRightRadius: this.state.topbradius,
              borderBottomLeftRadius: this.state.botbradius,
              borderBottomRightRadius: this.state.botbradius,
              transition: 'background-color 1s ease-out, border-radius 1s ease-out, top 1s ease-out, left 1s ease-out, transform 1s ease-out'
          };
  
          return(
              &lt;div style={this.menubuttonstyle}&gt;
                  {this.props.text}
              &lt;/div&gt;
          );
      }
  }
  
  
  export default NestedMenu;
  </code></pre>
  
  <p>package.json:</p>
  
  <pre><code>    {
    "name": "reactapp1",
    "version": "1.0.0",
    "description": "My first React project.",
    "main": "index.js",
    "scripts": {
      "start": "webpack-dev-server --hot"
    },
    "author": "",
    "license": "ISC",
    "dependencies": {
      "babel-core": "^6.26.0",
      "babel-loader": "^7.1.4",
      "babel-preset-es2015": "^6.24.1",
      "babel-preset-react": "^6.24.1",
      "react": "^16.3.1",
      "react-dom": "^16.3.1",
      "react-timeout": "^1.1.1",
      "style-it": "^2.0.0",
      "webpack": "^4.5.0"
    },
    "devDependencies": {
      "css-loader": "^0.28.11",
      "webpack-cli": "^2.0.14",
      "webpack-dev-server": "^3.1.3"
    }
  }
  </code></pre>
  
  <p>webpack.config.js:</p>
  
  <pre><code>    var config = {
     entry: './main.js',
     output: {
        path:'/',
        filename: 'index.js',
     },
     devServer: {
        inline: true,
        port: 8080
     },
     module: {
        rules: [
           {
              test: /\.jsx?$/,
              exclude: /node_modules/,
              loader: 'babel-loader',
              query: {
                 presets: ['es2015', 'react']
              }
           }
        ]
     }
  }
  module.exports = config;
  </code></pre>
  
  <p>Console output:
  <a href="https://i.stack.imgur.com/8QZ7d.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/8QZ7d.png" alt="enter image description here"></a></p>