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 — Konrad
– Konrad, Commented Jan 16, 2023 at 22:50

ludwiguer · Accepted Answer · 2023-01-16 23:13:08Z

8

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>

answered Jan 16, 2023 at 23:13

ludwiguer

2,2552 gold badges17 silver badges21 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

krishnaacharyaa · Accepted Answer · 2023-01-17 02:39:15Z

2

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>

answered Jan 17, 2023 at 2:39

krishnaacharyaa

26.1k9 gold badges102 silver badges138 bronze badges

Collectives™ on Stack Overflow

How to conditionally add/remove classes with TailwindCSS and React

2 Answers 2

Comments

1.Inline inside the class

2. Using a variable

3. Using clsx

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

1.Inline inside the class

2. Using a variable

3. Using clsx

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related