title: React/Firebase - unable to call this.props from within auth function
body: <p>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:</p>
  
  <pre><code>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 (
              &lt;div className="header-inner"&gt;
                  &lt;span onClick={this.props.toggleMenuOut} className="menuToggle"&gt;&lt;/span&gt;
                  &lt;a className="logo-a-tag" href="#"&gt;
                      &lt;img height="25" src="../../images/logo.png" alt="my logo"/&gt;
                  &lt;/a&gt;
                  &lt;form className="header-searchbox"&gt;
                      &lt;input placeholder="Search Samples Here..." onChange={this.props.updateSearch} value={this.props.searchInputVal} type="text"&gt;&lt;/input&gt;
                  &lt;/form&gt;
                  &lt;div className="header-acc"&gt;&lt;a className={"login " + this.props.loggedInState} href="#"&gt;Login&lt;/a&gt;&lt;a onClick={this.toggleSignupLayoverAction.bind(this)} className={"create " + this.props.loggedInState} href="#"&gt;Create Account&lt;/a&gt;
                  &lt;div className={"logged-in-header " + this.props.loggedInState}&gt;Hello {this.props.LoggedInUsername}&lt;/div&gt;
                  &lt;/div&gt;
                  &lt;div className="login-popup-par"&gt;
                      &lt;form&gt;
                          &lt;input placeholder="Email Address" className="login-email" type="text"&gt;&lt;/input&gt;
                          &lt;input placeholder="Password" className="login-user-password" type="password"&gt;&lt;/input&gt;
                          &lt;button onClick={this.signIn.bind(this)}&gt;Login&lt;/button&gt;
                      &lt;/form&gt;
                  &lt;/div&gt;
              &lt;/div&gt;
              )
          }
  }
  </code></pre>
  
  <p>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 <code>this.props.logUserIn(user);</code> 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 <code>.signInWithEmailAndPassword(email, password)</code> It seems that I can't call <code>this.props.logUserIn</code> 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?</p>