How to refactoring react components with member variable to es6 classes

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);