how to handle array of buttons handle click event in ReactJs

Question

I my react class component I tried it this way. But as soon as it renders the alert popup keeps coming all the time without any button click.

onHandleOnClick(data, e) {
console.log(data);
alert("got it" + data);
  }

renderRating(){
var arr = [0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10];
return arr.map((val) => {
  return (
    <button
     
      onClick={this.onHandleOnClick(val)}
    >
      {val}
    </button>
  );
 });
};

render() {
return (
  <div>
    {this.renderRating()}
 </div>
)
}

I am new in React. How do I do it?

You're calling the function instead of assigning it to the onClick event. Instead pass an anonymous function onClick={(e) => this.onHandleOnClick(val, e)} — pilchard
– pilchard, Commented Mar 14, 2021 at 11:29

pilchard · Accepted Answer · 2021-03-14 11:35:28Z

2

You're calling the function instead of assigning it to the onClick event.

Since you need to pass a parameter to the callback you can pass an anonymous function to onClick. Note that to also capture the event that React passes implicitly you should pass this as an argument in the anonymous function.

onClick={(e) => this.onHandleOnClick(val, e)}

answered Mar 14, 2021 at 11:35

pilchard

13.1k5 gold badges14 silver badges27 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

how to handle array of buttons handle click event in ReactJs

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related