Если мое условие выполнено, я хочу скрыть две кнопки/ссылки вместе. Как мне это сделать?

Это мой условный код: - {пользователь ? <button onClick = {logout} style = {{ color: "#182D36" }} className=' btn btn-light fs-6 fw-bold'> Выйти </button> : <Nav.Link as = {Link} to='login' >Войти</Nav.Link> }

Я также хочу скрыть эту ссылку для регистрации (<Nav.Link as = {Link} to='register' >Зарегистрироваться</Nav.Link>) по условию

Ваши кнопки находятся в том же div или дальше в дереве DOM?

— 11.05.2022 21:25

Можете ли вы добавить примеры кода? Будет легче получить ответ, если мы увидим ваш фактический код.

— 11.05.2022 21:29

@TusharShahi, тот же див

— 11.05.2022 21:33

И код лучше, когда вы нажимаете «Выбрать все», а затем скобку вверху....

— 11.05.2022 21:57

reactjs conditional-statements

11.05.2022 21:22

Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией

В JavaScript одним из самых запутанных понятий является поведение ключевого слова "this" в стрелочной и обычной функциях.

Концепция локализации и ее применение в приложениях React ⚡️

Локализация - это процесс адаптации приложения к различным языкам и культурным требованиям. Это позволяет пользователям получить опыт, соответствующий...

Навигация по приложениям React: Исчерпывающее руководство по React Router

React Router стала незаменимой библиотекой для создания одностраничных приложений с навигацией в React. В этой статье блога мы подробно рассмотрим...

Массив зависимостей в React

Все о массиве Dependency и его связи с useEffect.

Компонент против элемента в ReactJS - секрет оптимизации производительности за счет повторного использования элементов

Проще говоря, компонент - это фабрика для создания элементов.

Руководство по использованию хука useEffect для методов жизненного цикла React

Перейти к ответу Данный вопрос помечен как решенный

Ответы 2

просто добавь подписку в условие...

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

надеюсь это поможет

11.05.2022 21:54

Ответ принят как подходящий

Оберните их в один и тот же 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> }

Большое спасибо, решил это

— 11.05.2022 22:26

Тогда вы должны пометить этот вопрос как решенный этим ответом.... Заставьте нас набрать очки...

— 12.05.2022 10:27

11.05.2022 21:55