I created a simple login page, which, once the button is pressed, executes this function :

login = (email, password, navigate) => {
  this.setState({ loginButtonPressed: true });
  firebase
    .auth()
    .signInWithEmailAndPassword(email, password)
    .then(function(user) {
      navigate('Profile');
    })
    .catch(function(error) {
      this.setState({ loginButtonPressed: false });
      Alert.alert(error.toString());
    });
};

Once called, it executes "this.setState({ loginButtonPressed: true })" since the button changes shape (it is marked as pressed). But I get the following error: Undefined is not a function this.setState.

How can this be fixed? Thanks for your help.

I created a simple login page, which, once the button is pressed, executes this function :

login = (email, password, navigate) => {
  this.setState({ loginButtonPressed: true });
  firebase
    .auth()
    .signInWithEmailAndPassword(email, password)
    .then(function(user) {
      navigate('Profile');
    })
    .catch(function(error) {
      this.setState({ loginButtonPressed: false });
      Alert.alert(error.toString());
    });
};

Once called, it executes "this.setState({ loginButtonPressed: true })" since the button changes shape (it is marked as pressed). But I get the following error: Undefined is not a function this.setState.

How can this be fixed? Thanks for your help.

• javascript
• reactjs
• firebase
• react-native
• firebase-authentication

Share Improve this question Follow edited Apr 13, 2018 at 16:47 Tomasz Mularczyk 36.3k1919 gold badges118118 silver badges174174 bronze badges asked Apr 13, 2018 at 16:42 JeanJean 20144 silver badges1212 bronze badges

Add a ment  | 

5 Answers 5

Sorted by: Reset to default 5

The problem is with:

.catch(function(error) {
  this.setState({ loginButtonPressed: false });
  Alert.alert(error.toString());
});

you create an anonymous function where this will reference this anonymous function (Object), not a React Object.

I see you can use arrow functions, so fix it like:

.catch((error) => {
  this.setState({ loginButtonPressed: false });
  Alert.alert(error.toString());
});

With arrow function this will reference context in which it is used.

Or you can keep a copy of the reference to this, like this:

const self = this; (first line in your function);

and use "self" instead of "this" anywhere in the function.

You can use this in places where you might not be able to use arrow functions.

You need to bind to this in order to have access inside the callback. Try it with the arrow functions.

Are you extending react ponent?

If you are not you will need to do that to utilize setState, if you are you will need to be sure to create the state in a constructor before you update it with setState elsewhere.

Something along the lines of:

class Login extends React.Component {
  constructor(props) {
    super(props);
    this.state = { loginButtonPressed: false };
    this.login = this.login.bind(this);
  }

  login(email, password, navigate) {
    this.setState({ loginButtonPressed: true });
    firebase
      .auth()
      .signInWithEmailAndPassword(email, password)
      .then(function(user) {
        navigate('Profile');
      })
      .catch(function(error) {
        this.setState({ loginButtonPressed: false });
        Alert.alert(error.toString());
      });
  };

  render() {
    return (
      <Button onClick={this.logIn}>Login</Button>
    );
  }
}

An arrow function remembers it lexical scope. Refer MDN documentation -- "An arrow function does not newly define its own 'this' when it's being executed in the global context; instead, the 'this' value of the enclosing lexical context is used, equivalent to treating this as closure value. Thus, in the following code, the 'this' within the function that is passed to setInterval has the same value as 'this' in the enclosing function:" function Person() { this.age = 0;

  setInterval(() => {
    this.age++; // |this| properly refers to the person object
  }, 1000);
}

var p = new Person();