Get name of button onPress in react native

Question

I have two buttons that both call the same onPress function. In the callback I want to be able to differentiate between which was pressed.

Answer 1

One solution is to pass that info as a parameter:

<MKRadioButton
  title='A' 
  group={this.radioGroup}
  onPress={(event) => this._toggle(event, 'A')}
/>

The callback would then use that parameter

_toggle(event, buttonId) {
  // Use buttonId
}

---

EDIT: Another solution is a parent component that always returns the title prop:

class RadioParent extends Component {
  render() {
    return (
      <MKRadioButton
        title={this.props.title} 
        group={this.props.radioGroup}
        onPress={(event) => this.props.onPress(event, this.props.title)}
      />
    );
  }
}

Answer 2

To improve performance, you can bind the event handler in the constructor to have it rendered only once

Facebook tip (at the bottom of the page)

We generally recommend binding in the constructor or using the property initializer syntax, to avoid this sort of performance problem.

class MKRadioButtonWrapper extends React.PureComponent {
  constructor(props) {
    super(props);
    this.buttonPressed = this.buttonPressed.bind(this);
  }

  buttonPressed(){
    this.props.onPress(this.props.title);
  }

  render() {
    return (
    <MKRadioButton
       title={this.props.title}
       group={this.props.group}
       onPress={buttonPressed}
     />
    );
  }
}

class App extends React.Component {
  constructor(props) {
    super(props);

    this._toggle = this._toggle.bind(this);
  }

  _toggle(title) {
    //do what you want with the title
  }

  render() {
    return (
      <View>
        <MKRadioButtonWrapper
           title='A' 
           group={this.radioGroup}
           onPress={this._toggle}
         />

        <MKRadioButtonWrapper
           title='B' 
           group={this.radioGroup}
           onPress={this._toggle}
         />
      </View>
    );
  }
}