ReactJs conditional rendering not working

I am trying to call the onLogin() function from a child called Login. This function will set the state based on which the conditional rendering is done.

The problem is that Home is not getting rendered after setState is called. In fact the function getView() is not getting called after calling setState(), although the view is updated after i refresh the page.

class App extends React.Component {
  constructor(props) {
    super(props);
    this.onLogin.bind(this);
    this.state = {userLoggedIn: !!localStorage.getItem(USER_NAME)};
  }

  onLogin() {
    this.setState({userLoggedIn: true});
  }

  getView() {
    return this.state.userLoggedIn ? <Home /> :  <Login onLogin={this.onLogin} />;
  }

  render() {
    return (
        <span>
          {this.getView()}
        </span>
    );
  }
}

Answer

You need to add .bind(this) where you pass the prop to Login component like this:

<Login onLogin={this.onLogin.bind(this)} />

and you can delete the line after super(props); Here is a link to codesandbox: https://codesandbox.io/s/boring-chaum-5l8k6?file=/src/App.js