Add CSS ClassName dynamically in React loop Based on Condition

Question

I have react component the loop through data. I need to check add ClassName dynamically based on one of the field '{stateItem.transactionCoverStatus}' value.

Let's say if transactionCoverStatus == x then color-blue else if == y then color-red.. and so on.

There are about 5 possible values so also wonder if I can calculate in separate method which takes parameter and return class name!

  <tbody>
      {
         eziTransactionCollection.map((stateItem, stateIndex) =>(

           <tr key={stateIndex}>
              <td className="td-align-centre">{stateItem.eziTransactionId}</td>
              <td>{stateItem.transactionCoverStatus}</td>
              <td>{stateItem.loginDateTime}</td>
              <td>{stateItem.logoutDateTime}</td>
            </tr>
         ))

marc_s · Accepted Answer · 2021-03-24 06:24:08Z

1

You could use an object to map the class variants and pass your status to retrieve the value:

const COVER_COLORS = {
  active: 'blue',
  disabled: 'gray',
  warning: 'yellow',
}

const coverClass = (coverStatus) => {
  const variant = COVER_COLORS[coverStatus]
  return variant ? `color-${variant}` : '' // or return a default class
}

...

           <tr key={stateIndex}>
              <td className="td-align-centre">{stateItem.eziTransactionId}</td>
              <td className={coverClass(stateItem.transactionCoverStatus)}>{stateItem.transactionCoverStatus}</td>
              <td>{stateItem.loginDateTime}</td>
              <td>{stateItem.logoutDateTime}</td>
            </tr>

edited Mar 24, 2021 at 6:24

marc_s

760k186 gold badges1.4k silver badges1.5k bronze badges

answered Mar 23, 2021 at 17:08

Rafael Buzatto de Campos

10.5k6 gold badges29 silver badges36 bronze badges

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

Comments

TanishBartar22 · Accepted Answer · 2021-03-23 17:21:07Z

1

It is quite easy to give a condition on classname in react

: means else.

? means then.

 <td className={stateItem.transactionCoverStatus==='x' ? 'blue' : 'red'}>{stateItem.transactionCoverStatus}</td>

If you want to give multiple conditions. You should use || operator

<td className={stateItem.transactionCoverStatus==='x' || stateItem.transactionCoverStatus==='y'  ?  'red' : 'green'}>{stateItem.transactionCoverStatus}</td>

answered Mar 23, 2021 at 17:21

TanishBartar22

112 bronze badges

Collectives™ on Stack Overflow

Add CSS ClassName dynamically in React loop Based on Condition

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related