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

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>

Solution 1:^[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>
    </>
     }

Solution 2:^[2]

Wrap them with a React fragment or any empty tag. and it should work fine.

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

Solution 3:^[3]

{ 
  user?.uid ? 
      <button>Sign Out</button> 
      :
      <> 
         <Nav.Link>Login</Nav.Link> 
         <Nav.Link>Sign Up</Nav.Link>
      </>
}

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution	Source
Solution 1	Raouf Satto
Solution 2	Amr
Solution 3	c0dm1tu

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

Solution 1:[1]

Solution 2:[2]

Solution 3:[3]

Sources

Related Questions

Solution 1:^[1]

Solution 2:^[2]

Solution 3:^[3]