Update State in React (Firebase) Undefined Value

Question

I'm creating a login page using Firebase. As soon as the user logs in, the "auth", firebase returns a "user" variable, which I'm using to let me know whether to set the Component State of "loggedIn" to be True or False.

The auth functions are returning the correct "loggedin" and "loggedout" console.log messages. However when it gets to the setState, I'm not sure anything happens. When I re-render, the loggedIn state I initially created (which should be either True of False) is "undefined", which is confusing me.

class Navigation extends React.Component {
  static propTypes = {
    className: PropTypes.string,
  };

  constructor(props) {
    super(props);
    this.state = {
      loggedIn: false
    }
  }

  componentDidMount() {
    firebase.auth().onAuthStateChanged(function(user) {
      if (user) {
        console.log("USER LOGGED IN :) Nav.js")
        console.log(user.email)
        this.setState({
          loggedIn: true
        });
      } else {
        console.log("NOBODY'S HERE Nav.js")
        this.setState({
          loggedIn: false
        });
        // do not change state
      }
    }.bind(this));
  }

  render() {
    console.log("CUR STATE: ", this.state.isLoggedIn)
    return (
      <div className={cx(s.root, this.props.className)} role="navigation">
        <Navbar isLoggedIn={this.state.isLoggedIn}/>
      </div>
    );
  }
}

Answer 1

You're passing the wrong state variable to your NavBar-component. You are setting your state like this:

this.setState({
  loggedIn: false
});

but are attempting to use it like this in the render function: isLoggedIn={this.state.isLoggedIn}

This should be: isLoggedIn={this.state.loggedIn} instead.