How do I solve object or props is not defined in ReactJS?

Question

I am using a basic codebase in React that uses Webpack to compile ES6 and JSX to be backwards compatible.

I created a component using ES6 syntax and I want to display a props value into the component but I get an error in the console that says:

Uncaught ReferenceError: myCheese is not defined at Module../src/index.js (index.js:8) at webpack_require (bootstrap:18) at startup:3 at startup:5

App.js

import React from "react";
import { hot } from "react-hot-loader";

class App extends React.Component {
  render() {
    return (
      <div>
        <p>Another paragraph</p>
        <p>{this.props.msg}</p>
        <p>
          <strong>Cheese name: </strong> {this.props.cheese.name}
        </p>
      </div>
    );
  }
}

var myCheese = {
  name: "Camembert",
  smellFactor: "Extreme pong",
  price: "3:50",
};

export default hot(module)(App);

index.js

import React from "react";
import ReactDOM from "react-dom";
import App from "./App";
import "./styles.css";

// put component into html page
ReactDOM.render(
  <App msg="I like cheese" cheese={myCheese} />,
  document.getElementById("app")
);

webpack.config.base.js

const path = require("path");
const HtmlWebpackPlugin = require("html-webpack-plugin");

module.exports = {
  entry: "./src/index.js",
  output: {
    path: path.join(__dirname, "dist"),
    filename: "app.bundle.js",
  },
  module: {
  ...
  },
  plugins: [
    new HtmlWebpackPlugin({
      template: "./src/index.html",
    }),
  ],
};

Any help is greatly appreciated. Thanks.

Answer 1

You have myCheese in App.js rather than index.js

Try moving this block of code into index.js

var myCheese = {
  name: "Camembert",
  smellFactor: "Extreme pong",
  price: "3:50",
};