reactjs - Error "Failed to Compile" Variable is not defined no-undef

Question

Need help with this one

I'm trying to pass an argument called product to a function which is called for onClick but I'm getting an error

Code:

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.getBagdeClasses()}>{this.formatCount()}</span>
        <button
          onClick={() => this.handleIncrement(product)}
          className="btn btn-secondary btn-sm"
        >
          Increment
        </button>
      </div>
    );
  }

  getBagdeClasses() {
    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;

Error:

Failed to compile
src/components/counter.jsx
  Line 18:47:  'product' is not defined  no-undef

Search for the keywords to learn more about each error.
This error occurred during the build time and cannot be dismissed.

I am searching for a fix but nothing seems to be working. I am a newbie to react and don't know what went wrong.

question from:https://stackoverflow.com/questions/65884509/error-failed-to-compile-variable-is-not-defined-no-undef

Answer 1

just remove the Product variable from your code and it will work

import React, { Component } from "react";

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

handleIncrement = ()=> this.setState({ count: this.state.count + 1 })

 render() {
 return (
  <div>
    <span className={this.getBagdeClasses()}>{this.formatCount()}</span>
    <button
      onClick={() => this.handleIncrement()}
      className="btn btn-secondary btn-sm"
    >
      Increment
    </button>
  </div>
);
 }

 getBagdeClasses() {
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;