How to conditionally add/remove classes with TailwindCSS and React

Question

I have an expression that looks for form errors and appends a div if once bubbles up:

{touched && normalizedError && (
      <div className="visible alert-error text-xs text-red-500" role="alert">
        {normalizedError}
      </div>
    )}

I'd like to refactor this and always display the div beneath my input elements but use the invisble class to hide them from the user unless an error is returned—in which case I'd conditional add the visible class.

What's the best way to accomplish this?

Does this answer your question? [React Js conditionally applying class attributes](https://stackoverflow.com/questions/30533171/react-js-conditionally-applying-class-attributes) — Konrad, Jan 16 '23 at 22:50

score 4 · Accepted Answer · answered Jan 16 '23 at 23:13

There are several ways to accomplish what you want, the easiest would be to add the conditional in the className itself

<div className={`alert-error text-xs text-red-500 ${touched && normalizedError ? 'visible' : 'invisible'}`}  role="alert">
  {normalizedError}
</div>

score 1 · Answer 2 · answered Jan 17 '23 at 02:39

There are many different ways of getting this done.

1.Inline inside the class

<div className={`... ${touched && normalizedError ? 'visible' : 'invisible'}`}>
  {normalizedError}
</div>

2. Using a variable

let dependentClass = touched && normalizedError ? 'visible' : 'invisible';

className={`... ${dependentClass }`}

3. Using clsx

<div className={clsx('...',`${touched && normalizedError ? 'visible' : 'invisible'}`)}>
  {normalizedError}
</div>

How to conditionally add/remove classes with TailwindCSS and React

2 Answers2

1.Inline inside the class

2. Using a variable

3. Using clsx