CODEWITHSUNDEEP
reactjsreact-native
kaan_atakan
kaan_atakan

Reputation: 4047

Can't access React Native App object's property from inside method using this

This is being tested on Android using expo. The property randomNumber is can be read and written to by the render() method (I have tested with an alert and set operation right before the return statement), but for some reason it is undefined and can neither be read or set in the method newNumber().

The "Old" and "Set" alerts display undefined, the "New" alert displays a random number as expected. Sometimes an alert doesn't show. I'm assuming that it's just getting closed quickly from a prolonged touch. The alerts seem to be asynchronous and display in random order but the number displayed in the app never changes so I'm pretty sure that is not the issue. This might be obvious but I'm baffled

import React from 'react';
import { StyleSheet, Text, Button, View, Alert } from 'react-native';

export default class App extends React.Component {

    randomNumber = 9;

    render() {

        return (
            <View style={styles.container}>
                <Text>{this.randomNumber}</Text>
                <Button onPress={this.newNumber} title='New Random Number'/>
            </View>
        );
    }

    newNumber() {
        var number = Math.floor((Math.random() * 10));
        Alert.alert('Old: ' + this.randomNumber);
        Alert.alert('New: ' + number);
        this.randomNumber = number;
        Alert.alert('Set: ' + this.randomNumber);

    }

}

const styles = StyleSheet.create({
    container: {
        flex: 1,
        backgroundColor: '#fff',
        alignItems: 'center',
        justifyContent: 'center',
    },
});

Upvotes: 0

Views: 322

Answers (1)

Vikram Biwal
Vikram Biwal

Reputation: 2826

When you change instance variable your view did not reload. you must use state vari to reload view.

Example:

constructor() {
     super();
     this.state = { randomNumber:9 };
}

 render() {

    return (
        <View style={styles.container}>
            <Text>{this.state.randomNumber}</Text>
            <Button onPress={this.newNumber.bind(this)} title='New Random Number'/>
        </View>
    );
}

 newNumber() {
        var number = Math.floor((Math.random() * 10));
        Alert.alert('Old: ' + this.randomNumber);
        Alert.alert('New: ' + number);
        this.setState({randomNumber: number});
        Alert.alert('Set: ' + number);
  }

Upvotes: 1

Related Questions