javascript - React conditionally apply color to component

Question

I am trying to apply a color to a div conditionally based on 4 conditions. I usually use the ternary operator in the className prop but there is 4 conditions and there has got to be a better way to do this.

For example ,

<div className={`${styles.card} ${items.length > 1 && styles.blue} ${items.length > 2 && styles.green}` etc...}>data</div>

I cant use any other libraries either its just got to be using react

question from:https://stackoverflow.com/questions/65910504/react-conditionally-apply-color-to-component

Answer 1

You could build an array up with classes conditionally:

const Card = () => {
  const classNames = [styles.card];
  if (items.length === 1) {
    classNames.push(styles.blue);
  } else if (items.length > 1) {
    classNames.push(styles.green);
  }

  return (
    <div className={classNames.join(' ')}>data</div>
  )
};

Edit: Modified conditions to make more sense.