I want to be able to hide the links to register and log in once a user has logged in. I'm using react.
Here are the links in my nav:
<Navbar>
<Nav.Item>
<Nav.Link href="/Register">Register</Nav.Link>
</Nav.Item>
<Nav.Item>
<Nav.Link href="/Login">Login</Nav.Link>
</Nav.Item>
</Navbar>
I'm using local storage for the login:
localStorage.setItem("userID", user);
you can get the item with localStorage.getItem('userID') and use it to hide the links
<Navbar>
{!localStorage.getItem('userID') && (
<Nav.Item>
<Nav.Link href="/Register">Register</Nav.Link>
</Nav.Item>
<Nav.Item>
<Nav.Link href="/Login">Login</Nav.Link>
</Nav.Item>
)}
</Navbar>
this way the links will only be displayed if localStorage.getItem('userID') is undefined or has any falsy value