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

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>

CodePudding user response：

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>
 }

CodePudding user response：

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

CodePudding user response：

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>
    </>
     }