CODEWITHSUNDEEP
reactjstailwind-csstailwind-in-js
Ken Prince
Ken Prince

Reputation: 1496

How to conditionally add/remove classes with TailwindCSS and React

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?

Upvotes: 2

Views: 5598

Answers (2)

krishnaacharyaa
krishnaacharyaa

Reputation: 25110

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>

Upvotes: 2

ludwiguer
ludwiguer

Reputation: 2245

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>

Upvotes: 8

Related Questions