Medium - Bound and Unbound Methods

medium-unbound.tsx

class App extends Component {
  constructor() {
    super();
    this.state = {
      clicked: false
    };
  }
  
  onButtonPress() {
    // Will error out if "this" is not accessible
    this.setState({ clicked: true });
  }
  
  render() {
    return (
      <View style={styles.app}>
        <View style={styles.header}>
          <Image accessibilityLabel="React logo" source={logo} resizeMode="contain" style={styles.logo} />
          <Text style={styles.title}>Bound Callback Demo</Text>
        </View>
        <Text style={styles.intro}>
          Clicked? {this.state.clicked ? 'Yes' : 'No'}
        </Text>
        <View style={{ flexDirection: 'row' }}>
          <Button onPress={this.onButtonPress} title="Unbound callback will error out" />
          <Text> </Text>
          <Button onPress={() => this.onButtonPress()} title="Bound callback will work" />
        </View>
      </View>
    );
  }
}