React - get Item from local Storage - reactjs

Question

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. SyntaxError: Unexpected token p in JSON at position 0 Do you have some suggestions on to to fix it?
NavBar.js
const username = JSON.parse(localStorage.getItem('username'));
const NavBar = props => {
if (props.isAuth !== null) {
return <div>
## here I am trying to display the username
<p>Logged In as {{username}}</p>
</div>;
} else {
return <span>Not logged in</span>;
}
};
export default NavBar;
App.js
function App() {
const [loggedIn, setLoggedIn] = useState(localStorage.getItem("token"));
return (
<div>
<Router>
<Navbar isAuth={loggedIn} />
</Router>
<div>
<button
onClick={() => {
if (loggedIn) {
localStorage.removeItem("token", null);
setLoggedIn(null);
} else {
localStorage.setItem("token", true);
localStorage.setItem("username", "pierre-alex");
setLoggedIn(true);
}
}}
value="toggle"
>
Toggle
</button>
</div>
</div>
);
}
export default App;
thank you

Answer 1

If the value of username is an object then we need to stringify it while storing it in localStorage. We can then parse it to get the data.
localStorage.setItem('username',JSON.stringify({name:'Jonh Doe'}));
const username = JSON.parse(localStorage.getItem('username');
If the value stored in localStorage is not an object then we don't need to parse it. We can access it like below.
const username = localStorage.getItem('username')