title: How to update NavBar component in React upon successful log-in and before logging in
body: <p>I am trying to modify the Navbar contents before and after logging in so that before logging in, it shows Login and Register and after logging in, it shows other tabs apart from those two.
  I have an Auth.js with a function called isAuthenticated() which returns true if the user is logged in or false otherwise. Initially, isAuthenticated() returns false, so the Navbar shows register and login. However, once the user logs in, isAuthenticated() becomes true but that is not reflected in Navbar. How can I change that to ensure that it shows different things upon login/logout.</p>
  
  <p>PS - I havent completed navigation but I can conditionally render it to show different things if isLoggedin is true or false.</p>
  
  <p>App.js</p>
  
  <pre><code>import ProtectedRoute from './protectedroute'
  import Auth from './Auth'
  
  class App extends React.Component {
    constructor(props) {
      super(props);
    }
  
    render() {
       const isAuthenticated = Auth.isAuthenticated() 
       console.log(isAuthenticated)
    return (
        &lt;Router&gt;
          &lt;div&gt;
            &lt;NavigationBar isLoggedin={isAuthenticated}/&gt;
            &lt;Switch&gt;
              &lt;Route exact path = '/'
                component = {LandingPage}
              /&gt;
              &lt;Route exact path = '/register'
                component = {Register}
              /&gt;
              &lt;ProtectedRoute exact path = '/Success' 
                component = {Success}
              /&gt;
              &lt;Route path="*" component = {() =&gt; "404 NOT FOUND"}/&gt;
            &lt;/Switch&gt;
          &lt;/div&gt;
        &lt;/Router&gt;
    );
  }
  }
  
  export default App;
  </code></pre>
  
  <p>Auth.js</p>
  
  <pre><code>class Auth {
      constructor() {
          this.authenticated = false;
      }
  
      login() {
          this.authenticated = true;
      }
  
      logout() {
          this.authenticated = false;
      }
  
      isAuthenticated() {
          return this.authenticated;
      }
  }
  
  export default new Auth();
  </code></pre>
  
  <p>NavigationBar.js</p>
  
  <pre><code>import React from 'react'
  import { Button, Navbar, Nav, NavItem, NavDropdown, MenuItem } from 'react-bootstrap';
  import { Link } from 'react-router-dom'
  
  
  class NavigationBar extends React.Component {
  
    constructor(props) {
      super(props);
    }
  
    render() {
      const isLoggedin = this.props.isLoggedin
      console.log(isLoggedin)
      return (
        &lt;Navbar expand="lg"&gt;
          &lt;Navbar.Brand &gt;hello&lt;/Navbar.Brand&gt;
          &lt;Navbar.Toggle aria-controls="basic-navbar-nav" /&gt;
          &lt;Navbar.Collapse id="basic-navbar-nav"&gt;
            &lt;Nav className="ml-auto"&gt;
              &lt;Nav.Link&gt;&lt;Link to='/'&gt;Login&lt;/Link&gt;&lt;/Nav.Link&gt;
              &lt;Nav.Link&gt;&lt;Link to='/register'&gt;Register&lt;/Link&gt;&lt;/Nav.Link&gt;
            &lt;/Nav&gt;
          &lt;/Navbar.Collapse&gt;
        &lt;/Navbar&gt;
      )
    }
  }
  
  export default NavigationBar
  </code></pre>