How I can show two nav.link while using a conditional operator?

Question

My code:

<Nav>
    {
     user?.uid
     ?
     <button onClick={() => handleSignout()}>Sign Out</button>
     :
     <Nav.Link as={Link} to='/login'>Login</Nav.Link>
     <Nav.Link as={Link} to='/signup'>Sign Up</Nav.Link>
     }
</Nav>

Answer 1

I think it should be like

 { 
user?.uid ? <button onClick={() => handleSignout()}>Sign Out  </button> :
<React.Fragment> 
  <Nav.Link as={Link} to='/login'>Login</Nav.Link> 
  <Nav.Link as={Link} to='/signup'>Sign Up</Nav.Link>
</React.Fragment>
 }

or instead of React.Fragment you can use empty tag like:

  { 
    user?.uid ? <button onClick={() => handleSignout()}>Sign Out </button>:
    <> 
      <Nav.Link as={Link} to='/login'>Login</Nav.Link> 
      <Nav.Link as={Link} to='/signup'>Sign Up</Nav.Link>
    </>
     }