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

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.

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.

you are passing parameter as a variabe which is not defined.

try this

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

or declare product and assing it a value

render() {let product = Something    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>    );  }