title: React - get Item from local Storage
body: <p>I am new to React and trying to set up a basic client-side session.  I am getting an error when I am trying to retrieve the username from the local storage. <code>SyntaxError: Unexpected token p in JSON at position 0</code> Do you have some suggestions on to to fix it?</p>
  <p><strong>NavBar.js</strong></p>
  <pre><code>const username = JSON.parse(localStorage.getItem('username'));
  
  const NavBar = props =&gt; {
    if (props.isAuth !== null) {
      return &lt;div&gt;
          ## here I am trying to display the username
          &lt;p&gt;Logged In as {{username}}&lt;/p&gt;
  
      &lt;/div&gt;;
    } else {
      return &lt;span&gt;Not logged in&lt;/span&gt;;
    }
  };
  export default NavBar;
  </code></pre>
  <p><strong>App.js</strong></p>
  <pre><code>function App() {
    const [loggedIn, setLoggedIn] = useState(localStorage.getItem(&quot;token&quot;));
    return (
      &lt;div&gt;
        &lt;Router&gt;
          &lt;Navbar isAuth={loggedIn} /&gt;
        &lt;/Router&gt;
        &lt;div&gt;
          &lt;button
            onClick={() =&gt; {
              if (loggedIn) {
                localStorage.removeItem(&quot;token&quot;, null);
                setLoggedIn(null);
              } else {
                localStorage.setItem(&quot;token&quot;, true);
                localStorage.setItem(&quot;username&quot;, &quot;pierre-alex&quot;);
                setLoggedIn(true);
              }
            }}
            value=&quot;toggle&quot;
          &gt;
            Toggle
          &lt;/button&gt;
        &lt;/div&gt;
      &lt;/div&gt;
    );
  }
  
  export default App;
  </code></pre>
  <p>thank you</p>