Update state after error message - Firebase - React Native

Question

I'm new to React and I'm trying to update a value in a page after receiving the error message from the signup. I start with an empty value and as soon as I receive the new one I would like to display it on screen. When I try to update the state it gives me an error

TypeError: undefined is not an object (evaluating 'this.setState').

It happens only when I add this.setState({ error: errorMessage}) inside the catch.

Here's the code.

export default class Signup extends React.Component {

    constructor(props) {
        super(props);
        this.state = {
            email: '',
            password: '',
            error: ''
        };
    }


    signUpUser = (email, password) => {

        firebase.auth().createUserWithEmailAndPassword(email, password)
            .then(function (user) {
                console.log("Created new user " + user.user.providerData[0].uid)
            })
            .catch(function (error) {
                let errorCode = error.code;
                let errorMessage = error.message;
                console.log(errorCode)
                console.log(errorMessage)
                this.setState({error: errorMessage})

            })

    }

    render() {
        return(
            <View style={styles.container}>

                <Text>{this.state.error}</Text>
                <TextInput
                    style={styles.forms}
                    onChangeText={email => this.setState({ email })}
                    placeholder = "email"
                />
                <TextInput
                    style={styles.forms}
                    onChangeText={password => this.setState({ password })}
                    placeholder = "password"
                />
                <Button
                    title="SIGNUP"
                    onPress={() => this.signUpUser(this.state.email, this.state.password)}
                />


            </View>
        )
    }
}

"When i try to update the state it gives me an error" What are the exact error message and stack trace you receive? Please edit your question to include those. — Frank van Puffelen, Apr 04 '20 at 20:31
it says: TypeError: undefined is not an object (evaluating 'this.setState'). i happens only when i add 'this.setState({ error: errorMessage})' inside the catch — j010, Apr 04 '20 at 21:22

score 1 · Accepted Answer · answered Apr 04 '20 at 22:59

Inside a function() { ... } the meaning of this is different from outside of that function.

The simplest fix is to use => notation to declare those functions, as you already do elsewhere:

firebase.auth().createUserWithEmailAndPassword(email, password)
    .then((user) => {
        console.log("Created new user " + user.user.providerData[0].uid)
    })
    .catch((error) => {
        let errorCode = error.code;
        let errorMessage = error.message;
        console.log(errorCode)
        console.log(errorMessage)
        this.setState({error: errorMessage})
    })

Also see:

score 1 · Answer 2 · answered Apr 04 '20 at 23:40

Use arrow functions.

change your code to my code.

signUpUser = (email, password) => {

firebase.auth().createUserWithEmailAndPassword(email, password)
    .then(user => {
        console.log("Created new user " + user.user.providerData[0].uid)
    })
    .catch(error => {
        let errorCode = error.code;
        let errorMessage = error.message;
        console.log(errorCode)
        console.log(errorMessage)
        this.setState({error: errorMessage})

    })

}

Update state after error message - Firebase - React Native

2 Answers2