Обновить стиль className динамически в зависимости от состояния

Question

Я использую React Hooks в своем проекте и мне нужно попытаться выяснить, как динамически добавить класс в className, если значение состояния изменяется. Я использую react-hook-form для проверки моей формы.

RegisterForm.jsx

<input
  className={styles.authoriseInput}
  placeholder="Email"
  name="email"
  ref={register({required: true, minLength: 4})}  # supposed to be a regex, but too long for this question
/>
{errors.email &&
  <p className={styles.errors}>Please enter a valid email.</p>
}

Вторая часть работает правильно, а при возникновении ошибки <p> показан тег. Но я застрял в том, как обновить свойство input className таким же образом. Я хочу добавить стиль к authoriseInput, который устанавливает border-color при срабатывании error.email.

Любые советы приветствуются.

Спасибо!

Answer 1

Добавить условие в свойство clasName

<input
   className={errors.email ? styles.errorInput : styles.authoriseInput}
   placeholder="Email"
   name="email"
   ref={register({required: true, minLength: 4})}  # supposed to be a regex, but too 
   long for this question
/>
{errors.email &&
    <p className={styles.errors}>Please enter a valid email.</p>
}

Answer 2

Вы можете условно установить classNames так же, как вы бы визуализировали компоненты.

<input
  className={errors.email && styles.authoriseInput}
  placeholder="Email"
  name="email"
  ref={register({required: true, minLength: 4})}  # supposed to be a regex, but too long for this question
/>
{errors.email &&
  <p className={styles.errors}>Please enter a valid email.</p>
}