title: React Component does not update until refresh
body: <p>I have the following code:
  In App.js: </p>
  
  <pre><code>class App extends React.Component {
      constructor() {
          super();
          this.state = {
              loggedStatus: {
                  username: undefined,
                  isLoggedIn: undefined,
              }
          }
      }
  
      componentDidMount() {
          let username = undefined;
          let isLoggedIn = undefined;
          if (localStorage.getItem("token")) {
              fetch("https://localhost:8000/user", {
                  method: "POST",
                  headers: {
                      "Authorization": `Bearer ${localStorage.getItem("token")}`
                  }
              }).then(response =&gt; response.json()).then(response =&gt; {
                  if (response.success) {
                      username = response.username;
                      isLoggedIn = true;
                  } else {
                      username = undefined;
                      isLoggedIn = false;
                      localStorage.removeItem("token");
                  }
  
                  this.setState({
                      loggedStatus: {
                          username: username,
                          isLoggedIn: isLoggedIn
                      }
                  })
              })
          }
      }
  
      render() {
          return (
              &lt;div className="App"&gt;
                  &lt;Router&gt;
                      &lt;Navbar loggedStatus={this.state.loggedStatus}/&gt;
                      &lt;Switch&gt;
                          &lt;Route path="/register"&gt;
                              &lt;RegisterForm /&gt;
                          &lt;/Route&gt;
                          &lt;Route path="/login"&gt;
                              &lt;LoginForm /&gt;
                          &lt;/Route&gt;
                      &lt;/Switch&gt;
                  &lt;/Router&gt;
              &lt;/div&gt;
          )
      }
  }
  </code></pre>
  
  <p>and in Navbar.js:</p>
  
  <pre><code>logout = () =&gt; {
      localStorage.removeItem("token");
  }
  
  render() {
      return (
          &lt;nav className="Navbar"&gt;
              {this.props.loggedStatus.isLoggedIn ? 
              &lt;&gt;
                  &lt;ul className="Navbar-list"&gt;
                      &lt;li className="Navbar-item"&gt; 
                          &lt;span className="Navbar-greeting"&gt;Hello, {this.props.loggedStatus.username}&lt;/span&gt;
                      &lt;/li&gt;
  
                      &lt;li className="Navbar-item"&gt;
                          &lt;button className="Navbar-logoutBtn" onClick={this.logout}&gt;Sign Out&lt;/button&gt;
                      &lt;/li&gt;
                  &lt;/ul&gt;
              &lt;/&gt;
              :
              &lt;&gt;
              &lt;ul className="Navbar-list"&gt;
                  &lt;li className="Navbar-item"&gt;
                      &lt;Link to="/register" className="Navbar-link"&gt;Sign Up&lt;/Link&gt;
                  &lt;/li&gt;
                  &lt;li className="Navbar-item"&gt;
                      &lt;Link to="/login" className="Navbar-link"&gt;Log In&lt;/Link&gt;
                  &lt;/li&gt;
              &lt;/ul&gt;
              &lt;/&gt;
              }
          &lt;/nav&gt;
      )
  }
  </code></pre>
  
  <p>The problem I'm having is I would like my navbar component to update when either the user logs in, or logs out. With my current code, I have to refresh the page in order for it to update. I've been messing around with things with no luck. I understand that componentDidMount is only called once through the entire process, which is why setState is only called upon refresh. </p>
  
  <p>Edit: Login. </p>
  
  <pre><code>        fetch(`${this.apiURL}/user/login`, {
              method: "POST",
              body: JSON.stringify(user),
              headers: {
                  "Accept": "application/json",
                  "Content-Type": "application/json"
              }
          })
          .then(response =&gt; response.json())
          .then(response =&gt; {
              if (response.success) {
                  status = {
                      statusMsg: &lt;p className="LoginForm-statusMsg"&gt;{response.statusMsg}&lt;/p&gt;
                  }
                  localStorage.setItem("token", response.token);
                  this.setState({
                      status: status
                  }, () =&gt; setTimeout(() =&gt; {
                      this.props.history.push("/");
                  }, 5000));
              } else {
                  status = {
                      statusMsg: &lt;p className="LoginForm-statusMsg"&gt;{response.statusMsg}&lt;/p&gt;
                  }
  
                  this.setState({
                      status : status
                  })
              }
          });
      }
  }
  </code></pre>