currently working on a simple navbar component. The following is my code:
{isLoggedIn ?
<Navbar.Brand ><Link to="/" style={{ textDecoration: 'none' }} onClick={() => dispatch(logoutUser())}>Logout</Link></Navbar.Brand>
:
<Navbar.Brand ><Link to="/registration" style={{ textDecoration: 'none' }}>Register</Link></Navbar.Brand>
<Navbar.Brand ><Link to="/login" style={{ textDecoration: 'none' }}>Login</Link></Navbar.Brand>
}
When the user is logged in, I want a logout button to appear, and when they are not logged in I want both register and login buttons to appear. But I cannot do both at the same time when isLoggedIn is false. Any way to do this?
Thank you!
{isLoggedIn ? <Navbar.Brand ><Link to="/" style={{ textDecoration: 'none' }} onClick={() => dispatch(logoutUser())}>Logout</Link></Navbar.Brand>
: <div>
<Navbar.Brand ><Link to="/registration" style={{ textDecoration: 'none' }}>Register</Link></Navbar.Brand>
<Navbar.Brand ><Link to="/login" style={{ textDecoration: 'none' }}>Login</Link></Navbar.Brand>
</div>
}
Edit: as suggested below, it is also possible to wrap between fragments.