Как сделать динамический класс используя модули?

Question

[Alex Krynytskyi]

import React, { useRef, useState } from 'react';
import style from '../styles/modules/form.module.scss';

const Form = () => {

  let name_wrap = useRef();
  let name_input = useRef();
  let [nputStatus, setInputStatus] = useState('test');

    return (
    <form className={style.form}>
      <span className={style.title}>Lorem ipsum dolor sit amet.?</span>
      <span
        className={style.answer}
      >Lorem ipsum dolor sit.</span>
      <div ref={name_wrap} className={`${style.input_wrap} ${inputStatus}`}>
        <input
          onFocus={()=>{inputFocus();}} 
          onBlur={()=>{inputBlur();}}
          ref={name_input}
          type="text"
          placeholder='*Name'
        />
      
    </form>
  )
}

export default Form

Подскажите как правильно используя модули сделать динамический класс.
Хочу вешать - активный, не активный, ерор и всякое такое но используя одну переменную inputStatus

Answer 1

[Валерий]

https://www.npmjs.com/package/classnames

import cn from 'classnames';
 <span className={cn(style.title, {[style.title__error]: inputStatus === 'error'})}>Lorem ipsum dolor sit amet.?</span>