If my condition fulfilled, I want to hide two button/link with together. How can I do it?-CodePudding

This is my conditional code:- {user ? <button onClick={logout} style={{ color: "#182D36" }} className=' btn btn-light fs-6 fw-bold'> Log Out < /button> : <Nav.Link as={Link} to='login' >Login</Nav.Link> }

I also want to hide this Sign-Up link (<Nav.Link as={Link} to='register' >Sign UP</Nav.Link>) by the condition

CodePudding user response：

just throw the signup into the condition as well...

const content = user ? 
<button onClick={logout} style={{ color: "#182D36" }} className=' btn btn-light fs-6 fw-bold'> Log Out < /button> 
:
<>
<Nav.Link as={Link} to='login' >Login</Nav.Link> 
<Nav.Link as={Link} to='register' >Sign UP</Nav.Link>
</>

return (
  <>
    {content}
  </>
)

hope this helps

CodePudding user response：

Wrap them in the same div...

{user ? <button onClick={logout} style={{ color: "#182D36" }} className=' btn btn-light fs-6 fw-bold'> Log Out < /button> : <div><Nav.Link as={Link} to='login' >Login</Nav.Link>
<Nav.Link as={Link} to='register' >Sign UP</Nav.Link>
</div> }