How to fix ' "X" is not defined no-undef' error in React.js

Question

I am following an online tutorial to learn React and have encountered an error

./src/components/counter.jsx Line 24:  'product' is not defined  no-undef 

Could someone please explain what is going wrong in simple terms so I know how to fix this and can deal with it next time I encounter it.

I have looked through all related questions I could find on stackoverflow and haven't been able to fix it, if I have missed one that answers this then please link it.

I have had this error in the past but usually that was just because I had a typo (e.g. a capital instead of a lowercase) or did not import something correctly however that is not the case this time as far as I can tell.

I can see no difference between my code to what is in the video.

===index.js===

import React from "react";
import ReactDOM from "react-dom";
import "./index.css";
//import App from "./App";
import * as serviceWorker from "./serviceWorker";
import "bootstrap/dist/css/bootstrap.css";
import Counters from "./components/Counters";

ReactDOM.render(<Counters />, document.getElementById("root"));
serviceWorker.unregister();

===counter.jsx===

import React, { Component } from "react";

class Counter extends Component {
  state = {
    count: 0
  };

  handleIncrement = product => {
    console.log(product);
    this.setState({ count: this.state.count + 1 });
  };

  render() {
    return (
      <div>
        <span className={this.getBadgeClasses()}>{this.formatCount()}</span>
        <button
          onClick={() => this.handleIncrement(product)} //this is the line with the error
          className="btn btn-secondary btn-sm"
        >
          Increment
        </button>
      </div>
    );
  }

  getBadgeClasses() {
    let classes = "badge m-2 badge-";
    classes += this.state.count === 0 ? "warning" : "primary";
    return classes;
  }

  formatCount() {
    const { count } = this.state;
    return count === 0 ? "Zero" : count;
  }
}

export default Counter;

===counters.jsx===

import React, { Component } from "react";
import Counter from "./counter";

class Counters extends Component {
  state = {};
  render() {
    return (
      <div>
        <Counter />
        <Counter />
        <Counter />
        <Counter />
      </div>
    );
  }
}

export default Counters;

The expected output is that when I run it and go to the webpage it has buttons which I can press and counters beside them which will display how many times they have been pressed.

What actually happens is that when I go to the page it displays the following:

Failed to compile

./src/index.js

Cannot find file: 'Counters.jsx' does not match the corresponding name on disk: './src/components/counters.jsx'.
This error occurred during the build time and cannot be dismissed.

Answer 1

onClick={() => this.handleIncrement(product)}

At the point where this executes, product does not exist. The variable hasn't been declared or assigned anywhere, hence the not defined message.

This message is the product of a linter like eslint, which:

is a tool for identifying and reporting on patterns found in ECMAScript/JavaScript code, with the goal of making code more consistent and avoiding bugs.

Linters may be configured to emit warnings and errors, and when used as part of a build or compilation process, may be configured to abort compilation.

I'm not sure what the intent is here, but you could do onClick={this.handleIncrement} instead and it will increment your counter.

Answer 2

Even I was facing the same error as mentioned above. I am confused where this product parameter is coming from. However, I tried this step and it worked:

onClick={() => this.handleIncrement({})

Just pass an empty object and it will work.

Hope this helps.