How to use this.state with react-native? - react-native

Question

Hi I'm new to react so bear with me.
Below is my code...
import React from 'react';
import { StyleSheet, Text, View, TouchableHighlight, AsyncStorage} from 'react-native';
export default class App extends React.Component {
constructor(){
super();
this.state = {
myLeader: 'Joe',
};
}
onPress(){
alert({this.state.myLeader}); // 14
}
render() {
return (
<View>
<TouchableHighlight onPress={this.onPress.bind(this)}>
<Text>{this.state.myLeader}</Text>
</TouchableHighlight>
</View>
);
}
}
How to fix this problem?
error message is this. 'this is a reserved word(14.9) at Home.js:14.9'
I want to use {this.state.myLeader} in
onPress(){
alert({this.state.myLeader});
}
I tried 'bind(this)'
Any clue why?

Answer 1

Be careful with your usage of {}. In the context of JSX, {} can be used to "interpolate" a value within it. But if you're writing plain JavaScript code (as in alert({this.state.myLeader})) you don't need to interpolate anything, you just pass the value this.state.myLeader to alert, as in alert(this.state.myLeader).
Regarding the usage of alert within React Native, you'll probably want to follow #kytwb's advise and use Alert.alert.

Answer 2

Try to replace line 14 with:
console.log(this.state.myLeader)
To use Alert with React Native, take a look at the doc.

Answer 3

First, import Alert from react-native:
import { StyleSheet, Alert, Text, View, TouchableHighlight, AsyncStorage} from 'react-native';
Then, change the onPress function:
onPress(){
Alert.alert(this.state.myLeader); // 14
}

Answer 4

Another solution is to forget about the bind and do this:
onPress = () => {
alert({this.state.myLeader}); // 14
}
<TouchableHighlight onPress={this.onPress}>