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

Question

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?

Care to elaborate Andrew – red house 87 Oct 28 '16 at 14:13 — red house 87, Oct 28 '16 at 14:13

score 1 · Accepted Answer · edited May 23 '17 at 12:33

1

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) which is obviously not desired.

To combat this you may use ES6 arrow functions that do not bind this and refers to that of the enclosing context, the component. With arrow functions, this will not be window, but the component and will execute the method properly:

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 on regular functions to explicitly bind this context and other arguments to the function. Here's an example:

firebase.auth().signInWithEmailAndPassword(email, password).then(function(user) {  
    var user = firebase.auth().currentUser;
    this.props.logUserIn(user);
}.bind(this));
//...

This works because this outside the anonymous function is the component, and the context is passed to the function.

You need a constructorwhich is called on class instantiation, and is needed to use props. See here, use:

constructor(props) {
    super(props);

    /*this.state = { //for state if needed

    };*/
}  

//...

signIn(e) {
   //...
}

edited May 23 '17 at 12:33

Community

1
1

answered Oct 28 '16 at 14:14

Andrew Li

55,805
14
125
143

Thanks for your explanation, makes sense now why the props wern't being referred to. I've converted another function here to arrows but its not working this time. Instead im now getting a console error TypeError: Cannot read property 'props' of undefined(…). Here's the code here https://jsfiddle.net/8qL3fqj3/1/ would be amazing if you could take a look – red house 87 Oct 28 '16 at 15:04
hey @Andrew Here's the fiddle with all the JSX. Will upvote if you can help me solve it for sure! https://jsfiddle.net/8qL3fqj3/2/ – red house 87 Oct 28 '16 at 16:27
1

@BenLiger You need a constructor method – Andrew Li Oct 28 '16 at 16:32
ive heard of constructors but no too familiar with how they work. Are they easy to implement? – red house 87 Oct 28 '16 at 16:33
1

@BenLiger Yes. It's just a method of the class. They construct the class and pass props. See the updated answer – Andrew Li Oct 28 '16 at 16:34
i've implemented it here but its giving me console errors https://jsfiddle.net/vwyfrgj4/1/ . Sorry this is a bit confusing! – red house 87 Oct 28 '16 at 16:43
@BenLiger What errors? You should have the constructor as the first method per convention – Andrew Li Oct 28 '16 at 16:44
SignupComponent.js:85 Uncaught (in promise) TypeError: Cannot read property 'props' of undefined – red house 87 Oct 28 '16 at 16:45
which is the line this.props.logUserIn(sendUserId); – red house 87 Oct 28 '16 at 16:45
@BenLiger Did you trying using `bind`? – Andrew Li Oct 28 '16 at 16:47
yes as you can see in https://jsfiddle.net/vwyfrgj4/1/ it uses .bind in all onClicks – red house 87 Oct 28 '16 at 17:09
1

@BenLiger You've got an arrow function inside a regular function. Check your `updateProfile` promise. – Andrew Li Oct 29 '16 at 01:12
That was it! Thanks Andrew – red house 87 Oct 29 '16 at 11:34

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

1 Answers1