React read value of button clicked

Question

Sorry if this topic it\'s probably a copy of another one, but i don\'t understand what i\'m doing wrong with my code + i\'m really new to react. I tried several solutions bu

Answer 1

• 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

Answer 2

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}

Answer 3

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.

Answer 4

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);
}