имя класса запутаться, когда я использую, если в JSX в NextJS

Question

Привет, я использую следующий Js У меня проблемы с использованием if else в jsx. когда я использую, если классы элементов загружаются неправильно.

это мой код:

            <Nav>
                {
                    login ?
                        <React.Fragment>
                            <a className='text-white mx-1'>Welcome</a>
                            <a onClick={logOut} id={style.test} className={` text-danger mx-1`}>Log out</a>

                        </React.Fragment>

                        :
                        <React.Fragment>
                            <Link href="/register" prefetch={false}>
                                <a className='nav-link'>register</a>
                            </Link>

                            <Nav.Link className='text-info' eventKey={2}  onClick={handleShow}>
                                Login
                            </Nav.Link>
                        </React.Fragment>
                }

            </Nav>

Выйти должен получить класс (текст-опасность), но он получит другой класс

Answer 1

мы можем напрямую указать className, если это не переменная.

<a onClick={logOut} id={style.test} className="text-danger mx-1">Log out</a>

Answer 2

Изменение className="text-danger mx-1"

<React.Fragment>
    <a className='text-white mx-1'>Welcome</a>
    <a onClick={logOut} id={style.test} className="text-danger mx-1"}>Log out</a>

</React.Fragment>