React JS error on trying to generate items dynamically

I'm trying to reference the product with the count to generate it dynamically, but when I use the arrow function to do this, the error appears, mainly on trying to use the Product as reference to the HandleIncrement function.

import React, { Component } from 'react';  class Counter extends Component {   state = {       count: 0,  };    handleIncrement = product =>{      this.setState({ count: this.state.count + 1});  };      render() {      return(          <div>              <span className={this.getBadgeClasses()}>{this.formatCount()}</span>              <button                   onClick={() => this.handleIncrement(product)}                  className="btn btn-descondary 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;  

Error:

src\components\counter.jsx  Line 19:57:  'product' is not defined  no-undef    Search for the keywords to learn more about each error.  

https://stackoverflow.com/questions/66927399/react-js-error-on-trying-to-generate-items-dynamically April 03, 2021 at 11:15AM