Ben Liger Ben Liger - 1 month ago 8
React JSX Question

React/Firebase - unable to call this.props from within auth function

I have a login function to that authenticates with Firebase and then should call a login function passed down from a parent as props. Here it is:

class HeaderParentComponent extends Component {
toggleSignupLayoverAction(event){
this.props.toggleSignupLayover("true")
}
signIn(e){

e.preventDefault();
var email = $(".login-email").val();
var password = $(".login-user-password").val();

firebase.auth().signInWithEmailAndPassword(email, password).then(function(user) {
var user = firebase.auth().currentUser;
this.props.logUserIn(user);
}).catch(function(error) {
// Handle Errors here.
var errorCode = error.code;
var errorMessage = error.message;
// ...
});

}
render() {
return (
<div className="header-inner">
<span onClick={this.props.toggleMenuOut} className="menuToggle"></span>
<a className="logo-a-tag" href="#">
<img height="25" src="../../images/logo.png" alt="my logo"/>
</a>
<form className="header-searchbox">
<input placeholder="Search Samples Here..." onChange={this.props.updateSearch} value={this.props.searchInputVal} type="text"></input>
</form>
<div className="header-acc"><a className={"login " + this.props.loggedInState} href="#">Login</a><a onClick={this.toggleSignupLayoverAction.bind(this)} className={"create " + this.props.loggedInState} href="#">Create Account</a>
<div className={"logged-in-header " + this.props.loggedInState}>Hello {this.props.LoggedInUsername}</div>
</div>
<div className="login-popup-par">
<form>
<input placeholder="Email Address" className="login-email" type="text"></input>
<input placeholder="Password" className="login-user-password" type="password"></input>
<button onClick={this.signIn.bind(this)}>Login</button>
</form>
</div>
</div>
)
}
}


The props that has been passed down from the parent for the moment has a basic console.log of "logged in". It is passed down through the
this.props.logUserIn(user);
props. The issue is im trying to call this after authentication with Firebase has succeeded hence why I but it in a .then function after the
.signInWithEmailAndPassword(email, password)
It seems that I can't call
this.props.logUserIn
from inside the Auth function but I have no idea why. If I move the props function to outside the auth function it will call it no problem. Why can't I access the props from in there?

Answer

This is because the this in the anonymous function in then(function) by default refers to the window object. You're effectively trying to do window.props.logUserIn(user).

To combat this you may use ES6 arrow functions that do not bind this and refers to that of the enclosing context, the component:

firebase.auth().signInWithEmailAndPassword(email, password).then((user) => {  
    var user = firebase.auth().currentUser;
    this.props.logUserIn(user);
}).catch((error) => {
    // Handle Errors here.
    var errorCode = error.code;
    var errorMessage = error.message;

// ... });

A pre-ES6 way to do this is to use Function.prototype.bind to explicitly bind context.