A
A
Alex Krynytskyi2021-08-02 12:48:47
React
Alex Krynytskyi, 2021-08-02 12:48:47

How to make a dynamic class using modules?

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


Tell me how to make a dynamic class using modules correctly.
I want to hang - active, not active, eror and all that but using one inputStatus variable

Answer the question

In order to leave comments, you need to log in

1 answer(s)
V
Valery, 2021-08-03
@NEOmanceR

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>

Didn't find what you were looking for?

Ask your question

Ask a Question

731 491 924 answers to any question