CODEWITHSUNDEEP
reactjsfirebaseauthorization
PRvn
PRvn

Reputation: 51

This.SetState is not working

I know that perhaps the problem lies within the functions held inside the main login function but I cannot catch it. It returns this error:

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

export default class Main extends React.Component{
  constructor(){
    super()
    this.state = {
      logged: null,
      name: "Felicia"
    };
  }
  login(e){
    const email = document.getElementById('txtEmail').value;
    const password = document.getElementById('txtPass').value;
    firebase.auth().signInWithEmailAndPassword(email, password);
    firebase.auth().onAuthStateChanged(function(user) {
        if (user) {
          console.log("There is a user logged");
          console.log(user.email);
          this.setState({ name: firebase.auth.currentUser.displayName, logged: "true" })
        } else {
          console.log("No user Logged");
        }
      }).bind(this)

render(){
if(this.state.logged){
  return <Student name={this.state.name} />
} else {
  return (
    <div className="container">
    <div className="row">
    <div className="col-md-6 loginform">
    <input type="email" id="txtEmail" className="form-control" placeholder="[email protected]" />
    <small id="emailHelp" className="form-text text-muted">Well never share your email with anyone else.</small>
    <input type="password" id="txtPass" className="form-control" placeholder="password"/>
    <button onClick={this.login} className="btn btn-primary">Login</button>
    </div>
    </div>
    </div>
  )
}
  }
}

Could you please help me solving this problem?

Upvotes: 0

Views: 662

Answers (1)

Prakash Sharma
Prakash Sharma

Reputation: 16472

You are not binding the callback function to this. You should bind callback function of onAuthStateChanged to this like

firebase.auth().onAuthStateChanged((function(user) {
     ...
}).bind(this))

Upvotes: 1

Related Questions