Pass prop value as a parameter in an arrow function in an event handler onClick() in React

Question

I'm trying to pass a value of prop in a function which is invoked on onClick(), but I'm getting the following error when I try to console.log() that value inside the function.

Error:

**Warning: This synthetic event is reused for performance reasons. If you're seeing this, you're accessing the property nativeEvent on a released/nullified synthetic event. This is set to null. If you must keep the original synthetic event around, use event.persist().

class Calculator extends React.Component {
  constructor(props) {
    super(props);
    this.evaluateInfixString = this.evaluateInfixString.bind(this);
    this.appendInfixString = this.appendInfixString.bind(this);
    this.state = {
      buttons: ["+", "-", "*", "/", 1, 2, 3, 4, 5, 6, 7, 8, 9, 0, "clear", "="],
      infixString: null
    };
  }
  evaluateInfixString() {
    console.log("perform operation");
  }
  appendInfixString(buttonPressed) {
    console.log(buttonPressed);
  }
  render() {
    return (
      <div id={"calculator"}>
        <Display value={this.state.infixString} />
        <Buttons
          buttons={this.state.buttons}
          appendInfixString={this.appendInfixString}
        />
      </div>
    );
  }
}

class Display extends React.Component {
  render() {
    return <div id={"display"}>{this.props.value}</div>;
  }
}

class Buttons extends React.Component {
  render() {
    return (
      <div id={"buttons"}>
        {this.props.buttons.map(button => {
          return <button className={"button"} onClick={(button) => this.props.appendInfixString(button)}>{button}</button>;
        })}
      </div>
    );
  }
}

const rootElement = document.getElementById("root");
ReactDOM.render(<Calculator />, rootElement);

Answer 1

Change:

return <button className={"button"} onClick={(button) =>  this.props.appendInfixString(button)}>{button}</button>;

To:

    return <button className={"button"} onClick={() => this.props.appendInfixString(button)}>{button}</button>;

Here's a working codepen . If you open the console, you'll see that the number or character is logged to the console for you.

Another way to accomplish what you'd like to do would be something like what I've done in this codepen . You'll be passing the event back to the parent and then you can access the value with e.target.value like I've shown in your parent component. In that case, you're child component would have a click handler like this:

<button type="button" className={"button"} value={button} onClick={this.props.appendInfixString}>{button}</button>

The button value will be passed back with the event in the parent click event handler, which you can access there.

Answer 2

What is passed to onClick is click event, so in your code below

<button className={"button"} onClick={(button) =>this.props.appendInfixString(button)}>{button}</button>

what you pass to the appendInfixString is not the button string that the user clicks, but rather the click event. If you need to pass the button string being clicked, try

<button className={"button"} onClick={() => this.props.appendInfixString(button)}>{button}</button>