title: Change login text button to logout and vice versa
body: <p>I'm in the middle of learning React. I have an authentication program using <strong>JWT</strong>, <strong>passport</strong>, and <strong>Redux</strong>. I'm making navbar with bootstrap that filled with Logo, Register button, and login button. I don't understand to change login text button with logout text when a user successfully logged in and <strong><em>vice versa</em></strong> when successfully logged out. Here's my code in <strong>Dashboard.js</strong>:</p>
  
  <pre><code>class Dashboard extends Component {
    onLogoutClick = e =&gt; {
      e.preventDefault();
      this.props.logoutUser();
    };
  
    render() {
      const { user } = this.props.auth;
  
      return (
        &lt;div style={{ height: "75vh" }} className="container valign-wrapper"&gt;
          &lt;div style={{ marginTop: "4rem" }} className="row"&gt;
            &lt;div className="landing-copy col s12 center-align"&gt;
              &lt;h4&gt;
                &lt;b&gt;Hey there,&lt;/b&gt; {user.name}
                &lt;br /&gt;
                &lt;br /&gt;
                &lt;p className="flow-text grey-text text-darken-1"&gt;
                  You are logged in!
                &lt;/p&gt;
              &lt;/h4&gt;
              &lt;button
                style={{
                  width: "150px",
                  borderRadius: "3px",
                  letterSpacing: "1.5px",
                  marginTop: "1rem"
                }}
                onClick={this.onLogoutClick}
                className="btn btn-danger"
              &gt;
                Logout
              &lt;/button&gt;
            &lt;/div&gt;
          &lt;/div&gt;
        &lt;/div&gt;
      );
    }
  }
  
  Dashboard.propTypes = {
    logoutUser: PropTypes.func.isRequired,
    auth: PropTypes.object.isRequired
  };
  
  const mapStateToProps = state =&gt; ({
    auth: state.auth
  });
  
  export default connect(mapStateToProps, { logoutUser })(Dashboard);
  </code></pre>
  
  <p>And the <strong>Navbar.js</strong> code:</p>
  
  <pre><code>class Navbar extends Component {
    render() {
      return (
        &lt;nav class="navbar navbar-expand-lg navbar-light bg-light"&gt;
          &lt;Link
            to="/"
            style={{
              fontFamily: "monospace"
            }}
            className="navbar-brand"
          &gt;
            REAVOTE
          &lt;/Link&gt;
          &lt;button
            class="navbar-toggler"
            type="button"
            data-toggle="collapse"
            data-target="#navbarNav"
            aria-controls="navbarNav"
            aria-expanded="false"
            aria-label="Toggle navigation"
          &gt;
            &lt;span class="navbar-toggler-icon"&gt;&lt;/span&gt;
          &lt;/button&gt;
          &lt;div class="collapse navbar-collapse" id="navbarNav"&gt;
            &lt;ul class="navbar-nav mr-auto"&gt;&lt;/ul&gt;
            &lt;div class="form-inline my-2 my-lg-0"&gt;
              &lt;Link
                to="/register"
                style={{
                  width: "140px",
                  borderRadius: "3px",
                  letterSpacing: "1.5px"
                }}
                className="btn btn-primary"
              &gt;
                Register
              &lt;/Link&gt;
              &amp;ensp;
              &lt;Link
                to="/login"
                style={{
                  width: "140px",
                  borderRadius: "3px",
                  letterSpacing: "1.5px"
                }}
                className="btn btn-danger"
              &gt;
                Log In
              &lt;/Link&gt;
            &lt;/div&gt;
          &lt;/div&gt;
        &lt;/nav&gt;
      );
    }
  }
  
  export default Navbar;
  </code></pre>