How to get value attribute for corresponding button?

Question

buttonPress = (event) => { console.log(event.props.value)}

  <RaisedButton ref={(button) => { this.RaisedButton = button; }} label="Primary" value = "year" onTouchTap={()=>this.buttonPress( this.RaisedButton )}  primary={true} />

When I try to render one button like the above, I get the value. But, when I render multiple buttons, I only get the last button's value for all the buttons. whatever button I click I get year.

    buttonPress = (event) => { console.log(event.props.value)}

      <RaisedButton ref={(button) => { this.RaisedButton = button; }} label="Primary" value = "day" onTouchTap={()=>this.buttonPress( this.RaisedButton )}  primary={true} />
 <RaisedButton ref={(button) => { this.RaisedButton = button; }} label="Primary" value = "month" onTouchTap={()=>this.buttonPress( this.RaisedButton )}  primary={true} />
 <RaisedButton ref={(button) => { this.RaisedButton = button; }} label="Primary" value = "year" onTouchTap={()=>this.buttonPress( this.RaisedButton )}  primary={true} />

How can I get the value for corresponding buttons?

Answer 1

You only keep one reference to a button, and the ref callbacks overwrite each other. Instead, you could split them up into three separate references:

<RaisedButton ref={(button) => { this.RaisedButtonDay = button; }} label="Primary" value = "day" onTouchTap={()=>this.buttonPress( this.RaisedButtonDay )}  primary={true} />
<RaisedButton ref={(button) => { this.RaisedButtonMonth = button; }} label="Primary" value = "month" onTouchTap={()=>this.buttonPress( this.RaisedButtonMonth )}  primary={true} />
<RaisedButton ref={(button) => { this.RaisedButtonYear = button; }} label="Primary" value = "year" onTouchTap={()=>this.buttonPress( this.RaisedButtonYear )}  primary={true} />

---

On a side note, what you are passing into buttonPress is not an event object, but rather a reference to the button itself.