How to pass a paramater in the onclick event in React (Could not get the value)

I could not get the expected value so guys please help me out guys The code should run and each time when button is clicked it should increment one times and have an id but it shows me that in the render method product is not defined

import React, { Component } from 'react';

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

    //constructor() {
    //    super();
    //    this.handleIncreement = this.handleIncreement.bind(this);
    //}

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

    render() { 
        return (
            <div>
            
            <span className={this.handlebadgeClasses()}>{this.handleCounter()}</span>
            <button onClick={ () =>this.handleIncreement(product) } className="btn btn-secondary btn-sm">Increement</button>
            
            </div> 
          );
    }

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

    handleCounter(){
        const {count} = this.state;
        return count === 0 ? 'Zero' : count;
    }
}
 
export default Counter;

I’m sorry you didn’t receive any help with this earlier.

Look at how you’ve established your state. I can see you’ve commented out the constructor, super, and bind. These are needed. State should be stored within the constructor, after the super.

Check out the topic cheatsheets for help when you’re a bit fuzzy about the basic structure of a stateful component.

Here’s an example that should help you work out your problem

class MyName extends React.Component {
  constructor(props) {
    super(props);
    this.state = { name: 'Jane Doe' };
    this.changeName = this.changeName.bind(this);
  }
 
  changeName(newName) {
    this.setState({ name: newName });
  }
 
  render() {
    return (
      <h1>My name is {this.state.name}</h1>
      <NameChanger handleChange={this.changeName} />
    )
  }
}