How to refactor reactive components with member variable into es6 classes

Question

How can I refactor React components with a member variable into es6 classes. It works without a state variable. Why, when I run the code below, I get a big red screen with "I can’t add a property counter, the object is not expandable"?

'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 the value in the constructor:

  constructor(props) { super(props) this.counter = 23 } 

You may receive errors due to the state setting method. Try setting the state as follows:

 updateNum(aEvent) { this.setState({ inputedNum: aEvent.nativeEvent.text, }) } 

And the onPress function should be called as follows:

 <Text style={styles.bigTextPrompt} onPress={() => this.buttonPressed()}> 

I installed the full working draft 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);