React: Passing event arguments

Passing event arguments

Let’s say we want to pass an id of a product through a method. How can we do this?

doHandleIncrement = () => {
    this.handleIncrement({ id: 1});
};

Make a new method named doHandleIncrement. This is the full code.

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

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

   doHandleIncrement = () => {
     this.handleIncrement({ id: 1 });
   };

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

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

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

export default Counter;

Notice that doHandleIncrement method has created. If I click the button, doHandleIncrement method will be executed. And then, handleIncrement method will be executed with argument id: 1 in doHandleIncrement method.

In handleIncrement method,

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

The value id: 1 will be passed to product, so id: 1 will be displayed on console when I clicked the button.

The solution a little bit looks complicated, so here is the better solution.

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

<button onClick={ () => this.handleIncrement({ id: 1 }) } className="btn btn-secondary btn-sm">Increment</button>
      </div>

Without making any method, I can just define in button area.