title: Show LoggedIn username on successful login [getting JSX and Router related error in code] --
body: <p>My aim is to show logged in user name and a logout link in the header section.
  User logs in to my app. with username and password. Upon successful login,
  I would like to show the respective username in the top right header strip, along with a logout link.</p>
  
  <p>header strip html [located in App.js] -</p>
  
  <pre><code>&lt;nav className="navbar navbar-expand-lg navbar-light bg-custom"&gt;
                  &lt;a className="navbar-brand" href="https://www.sellcodes.com/pro_indigo" target="_blank"&gt;
                      &lt;img src={logoMain} width="30" height="30" alt="" /&gt;
                  &lt;/a&gt;
                  &lt;Link to="/" className="navbar-brand"&gt;Football Legends&lt;/Link&gt;
                  &lt;div className="collpase nav-collapse"&gt;
                      &lt;ul className="navbar-nav mr-auto"&gt;
                          &lt;li className="navbar-item"&gt;
                              &lt;Link to="/" className="nav-link"&gt;Players&lt;/Link&gt;
                          &lt;/li&gt;
                          &lt;li className="navbar-item"&gt;
                              &lt;Link to="/create" className="nav-link"&gt;Create Player&lt;/Link&gt;
                          &lt;/li&gt;
                          &lt;li className="navbar-item"&gt;
                              &lt;Link to="/hallofFamers" className="nav-link"&gt;Hall of Fame&lt;/Link&gt;
                          &lt;/li&gt;
                          &lt;li className="navbar-item" style={{marginLeft:680}}&gt;
                              &lt;Link to="/login" className="nav-link"&gt;Login&lt;/Link&gt;
                          &lt;/li&gt;
                          &lt;li className="navbar-item" style={{ marginLeft: 12 }}&gt;
                              &lt;Link to="/register" className="nav-link"&gt;Sign Up&lt;/Link&gt;
                          &lt;/li&gt;
                      &lt;/ul&gt;
  
  
                  &lt;/div&gt;
              &lt;/nav&gt;
  </code></pre>
  
  <p>login.js code -</p>
  
  <pre><code>import { login } from './shared/UserFunction';
  
  onSubmit(e) {
          e.preventDefault()
  
          const user = {
              email: this.state.email,
              password: this.state.password
          }
  
          login(user).then(res =&gt; {
              this.props.history.push(`user/dashboard`)
          })
  
      }
  </code></pre>
  
  <p>As you can understand I have a separate file where my login implementation logic is written and I have just imported from there.</p>
  
  <p>UserFunction.js code -</p>
  
  <pre><code>import axios from 'axios';
  import { Router, Route, Link, RouteHandler } from 'react-router';
  
  export const login = user =&gt; {
      return axios
          .post('http://localhost:4000/users/login', {
              email: user.email,
              password: user.password
          })
          .then(response =&gt; {
              localStorage.setItem('usertoken', (response.data));
              console.log('Login Successful');
              return response.data
          })
          .catch(err =&gt; {
              console.log(err)
          })
  }
  
  export const findToken = () =&gt; {
      return localStorage.getItem('usertoken');
  }
  
  export const logout =()=&gt;
  {
      localStorage.removeItem('usertoken');
      this.props.history.push('/login');
  }
  </code></pre>
  
  <p>What I how I tried to do this is by following much the same approach in Angular *ngIf and templates.
  So I tried following code -</p>
  
  <pre><code>import { findToken } from './components/shared/UserFunction';
  
  &lt;nav className="navbar navbar-expand-lg navbar-light bg-custom"&gt;
                  &lt;a className="navbar-brand" href="https://www.sellcodes.com/pro_indigo" target="_blank"&gt;
                      &lt;img src={logoMain} width="30" height="30" alt="" /&gt;
                  &lt;/a&gt;
                  &lt;Link to="/" className="navbar-brand"&gt;Football Legends&lt;/Link&gt;
                  &lt;div className="collpase nav-collapse"&gt;
                      &lt;ul className="navbar-nav mr-auto"&gt;
                          &lt;li className="navbar-item"&gt;
                              &lt;Link to="/" className="nav-link"&gt;Players&lt;/Link&gt;
                          &lt;/li&gt;
                          &lt;li className="navbar-item"&gt;
                              &lt;Link to="/create" className="nav-link"&gt;Create Player&lt;/Link&gt;
                          &lt;/li&gt;
                          &lt;li className="navbar-item"&gt;
                              &lt;Link to="/hallofFamers" className="nav-link"&gt;Hall of Fame&lt;/Link&gt;
                          &lt;/li&gt;
                          {findToken &amp;&amp;
                              [
                                  &lt;li className="navbar-item" style={{marginLeft:680}}&gt;
                                      &lt;Link to="/user/profile" className="nav-link"&gt;{the username supposed to be here}&lt;/Link&gt;
                                  &lt;/li&gt;
                                  &lt;li className="navbar-item" style={{ marginLeft: 12 }}&gt;
                                      &lt;Link to="/login" className="nav-link"&gt;Logout&lt;/Link&gt;
                                  &lt;/li&gt;
                              ]
                          }
                          &lt;li className="navbar-item" style={{marginLeft:680}}&gt;
                              &lt;Link to="/login" className="nav-link"&gt;Login&lt;/Link&gt;
                          &lt;/li&gt;
                          &lt;li className="navbar-item" style={{ marginLeft: 12 }}&gt;
                              &lt;Link to="/register" className="nav-link"&gt;Sign Up&lt;/Link&gt;
                          &lt;/li&gt;
                      &lt;/ul&gt;
  
  
                  &lt;/div&gt;
              &lt;/nav&gt;
  </code></pre>
  
  <p>But this is giving me a host of errors related to JSX and Parent Element Router. 
  So how should I approach this? A better way/technique that I can follow? I tried the above after consulting some other links. What is the best way to do this in my scenario?</p>
  
  <p>EDITS: I did some modification on my code but still not getting my desired outcome.</p>
  
  <pre><code>&lt;nav className="navbar navbar-expand-lg navbar-light bg-custom"&gt;
                  &lt;a className="navbar-brand" href="https://www.sellcodes.com/pro_indigo" target="_blank"&gt;
                      &lt;img src={logoMain} width="30" height="30" alt="" /&gt;
                  &lt;/a&gt;
                  &lt;Link to="/" className="navbar-brand"&gt;Football Legends&lt;/Link&gt;
                  &lt;div className="collpase nav-collapse"&gt;
                      &lt;ul className="navbar-nav mr-auto"&gt;
                          &lt;li className="navbar-item"&gt;
                              &lt;Link to="/" className="nav-link"&gt;Players&lt;/Link&gt;
                          &lt;/li&gt;
                          &lt;li className="navbar-item"&gt;
                              &lt;Link to="/create" className="nav-link"&gt;Create Player&lt;/Link&gt;
                          &lt;/li&gt;
                          &lt;li className="navbar-item"&gt;
                              &lt;Link to="/hallofFamers" className="nav-link"&gt;Hall of Fame&lt;/Link&gt;
                          &lt;/li&gt;
                          {localStorage.getItem('usertoken')!==null ?
                              &lt;React.Fragment&gt;
                                  &lt;li className="nav-item" style={{ marginLeft: 680 }}&gt;
                                      &lt;Link to="/profile" className="nav-link"&gt;
                                          User
                                      &lt;/Link&gt;
                                  &lt;/li&gt;
                                  &lt;li className="nav-item" style={{ marginLeft: 12 }}&gt;
                                      &lt;a href="" onClick={this.logOut.bind(this)} className="nav-link"&gt;
                                          Logout
                                      &lt;/a&gt;
                                  &lt;/li&gt;
                              &lt;/React.Fragment&gt;
                              : 
                              &lt;React.Fragment&gt;
                                  &lt;li className="navbar-item" style={{ marginLeft: 680 }}&gt;
                                      &lt;Link to="/login" className="nav-link"&gt;Login&lt;/Link&gt;
                                  &lt;/li&gt;
                                  &lt;li className="navbar-item" style={{ marginLeft: 12 }}&gt;
                                      &lt;Link to="/register" className="nav-link"&gt;Sign Up&lt;/Link&gt;
                                  &lt;/li&gt;
                              &lt;/React.Fragment&gt;
                          }
                      &lt;/ul&gt;
  
  
                  &lt;/div&gt;
              &lt;/nav&gt;
  </code></pre>
  
  <p>As you can see, I added a ternary expression checking the availability of the storage token and then, based on that, 2 React Fragments to show different links. I am still not getting it however. 
  Upon login, it shows the same Login and SignUp links.</p>
  
  <p>Can you tell me why? What's the error? What's the reason neither of the above 2 approaches worked? Can anyone spot it?</p>