How to refactoring react components with member variable to es6 classes - react-native

Question

How can I refactor React components with a member variable to es6 classes
It works without state variable. Why, when running the code below, do I get a big red screen with "Can't add property counter, object is not extensible"?
'use strict';
let Dimensions = require('Dimensions');
let totalWidth = Dimensions.get('window').width;
let leftStartPoint = totalWidth * 0.1;
let componentWidth = totalWidth * 0.8;
import React, {
AppRegistry,
Component,
StyleSheet,
Text,
TextInput,
View
} from 'react-native';
class Login extends Component {
constructor(props) {
super(props);
this.counter =23;
this.state = {
inputedNum: ''
};
}
updateNum(aEvent) {
this.setState((state) => {
return {
inputedNum: aEvent.nativeEvent.text,
};
});
}
buttonPressed() {
this.counter++;
console.log(':::'+this.counter);
}
render() {
return (
<View style={styles.container}>
<TextInput style={styles.numberInputStyle}
placeholder={'input phone number'}
onChange={(event) => this.updateNum(event)}/>
<Text style={styles.bigTextPrompt}
onPress={this.buttonPressed}>
Press me...
</Text>
</View>
);
}
}
let styles = StyleSheet.create({
container: {
flex: 1,
backgroundColor: 'white',
},
numberInputStyle: {
top: 20,
left: leftStartPoint,
width: componentWidth,
backgroundColor: 'gray',
fontSize: 20
},
bigTextPrompt: {
top: 70,
left: leftStartPoint,
width: componentWidth,
backgroundColor: 'gray',
color: 'white',
textAlign: 'center',
fontSize: 60
}
});
AppRegistry.registerComponent('Project18', () => Login);

Answer 1

You need to set up the value in the constructor:
constructor(props) {
super(props)
this.counter = 23
}
You may be receiving the errors because of the way the state is being set. Try setting the state like this:
updateNum(aEvent) {
this.setState({
inputedNum: aEvent.nativeEvent.text,
})
}
And the onPress function should be called like this:
<Text style={styles.bigTextPrompt} onPress={() => this.buttonPressed()}>
I've set up a full working project here also pasted the code below.
https://rnplay.org/apps/Se8X5A
'use strict';
import React, {
AppRegistry,
Component,
StyleSheet,
Text,
TextInput,
View,
Dimensions
} from 'react-native';
let totalWidth = Dimensions.get('window').width;
let leftStartPoint = totalWidth * 0.1;
let componentWidth = totalWidth * 0.8;
class SampleApp extends Component {
constructor(props) {
super(props);
this.counter =23;
this.state = {
inputedNum: ''
};
}
updateNum(aEvent) {
this.setState({
inputedNum: aEvent.nativeEvent.text,
})
}
buttonPressed() {
this.counter++;
console.log(':::'+this.counter);
}
render() {
return (
<View style={styles.container}>
<TextInput style={styles.numberInputStyle}
placeholder={'input phone number'}
onChange={(event) => this.updateNum(event)}/>
<Text style={styles.bigTextPrompt}
onPress={() => this.buttonPressed()}>
Press me...
</Text>
</View>
);
}
}
let styles = StyleSheet.create({
container: {
flex: 1,
backgroundColor: 'white',
},
numberInputStyle: {
top: 20,
left: leftStartPoint,
width: componentWidth,
backgroundColor: 'gray',
fontSize: 20,
width:200,
height:50
},
bigTextPrompt: {
top: 70,
left: leftStartPoint,
width: componentWidth,
backgroundColor: 'gray',
color: 'white',
textAlign: 'center',
fontSize: 60
}
});
AppRegistry.registerComponent('SampleApp', () => SampleApp);