React read value of button clicked

You could use the event object. Something like:

    handleInput = e => {
      const buttonValue = e.target.value;
      console.log(buttonValue);
      //some logic
}

And then you could add the method on the onClick event, passing the event object as well.

   onClick = {this.handleInput}

  • In handleInput function you were passing the "props" but using using "this.props"
  • onClick should be there for every button
  • Should not pass the string 'value' rather do this "onClick={(e) => this.handleInput(e)}"
  • you can access with event.target.value

First of all, your buttons don't currently do anything when clicked, so what we're going to need to do is add an onClick to each of your buttons: <Button onClick={this.handleInput} value="clear">C</Button>.

This will pass the event to handleInput.

To get the value of the button clicked we can do:

handleInput(el) {
    console.log(el.target.value);
}

You are sending and receiving data in a wrong way. First, you need to use onClick={this.handleInput} or onClick={(e) => this.handleInput(e,'value')} instead of onClick={() => this.handleInput('value')} because you are sending 'value' string in function.

<div className="keyboardRow roundBorder" value={"example"} onClick={e => this.handleInput(e, "value")} >

And then receive in following ways:

handleInput(e) {
    console.log(e.target.value);
}

You ca check the working demo.