title: How do I solve object or props is not defined in ReactJS?
body: <p>I am using a basic codebase in <code>React</code> that uses <code>Webpack</code> to compile <code>ES6</code> and <code>JSX</code> to be backwards compatible.</p>
  <p>I created a component using <code>ES6</code> syntax and I want to display a <code>props</code> value into the component but I get an error in the console that says:</p>
  <blockquote>
  <p>Uncaught ReferenceError: myCheese is not defined
  at Module../src/index.js (index.js:8)
  at <strong>webpack_require</strong> (bootstrap:18)
  at startup:3
  at startup:5</p>
  </blockquote>
  <p><strong>App.js</strong></p>
  <pre><code>import React from &quot;react&quot;;
  import { hot } from &quot;react-hot-loader&quot;;
  
  class App extends React.Component {
    render() {
      return (
        &lt;div&gt;
          &lt;p&gt;Another paragraph&lt;/p&gt;
          &lt;p&gt;{this.props.msg}&lt;/p&gt;
          &lt;p&gt;
            &lt;strong&gt;Cheese name: &lt;/strong&gt; {this.props.cheese.name}
          &lt;/p&gt;
        &lt;/div&gt;
      );
    }
  }
  
  var myCheese = {
    name: &quot;Camembert&quot;,
    smellFactor: &quot;Extreme pong&quot;,
    price: &quot;3:50&quot;,
  };
  
  export default hot(module)(App);
  </code></pre>
  <p><strong>index.js</strong></p>
  <pre><code>import React from &quot;react&quot;;
  import ReactDOM from &quot;react-dom&quot;;
  import App from &quot;./App&quot;;
  import &quot;./styles.css&quot;;
  
  // put component into html page
  ReactDOM.render(
    &lt;App msg=&quot;I like cheese&quot; cheese={myCheese} /&gt;,
    document.getElementById(&quot;app&quot;)
  );
  </code></pre>
  <p><strong>webpack.config.base.js</strong></p>
  <pre><code>const path = require(&quot;path&quot;);
  const HtmlWebpackPlugin = require(&quot;html-webpack-plugin&quot;);
  
  module.exports = {
    entry: &quot;./src/index.js&quot;,
    output: {
      path: path.join(__dirname, &quot;dist&quot;),
      filename: &quot;app.bundle.js&quot;,
    },
    module: {
    ...
    },
    plugins: [
      new HtmlWebpackPlugin({
        template: &quot;./src/index.html&quot;,
      }),
    ],
  };
  </code></pre>
  <p>Any help is greatly appreciated. Thanks.</p>