CODEWITHSUNDEEP
cssreactjs
sWarren
sWarren

Reputation: 473

Multiple CSS conditional classes using React

I want to incorporate 3 more conditional classes into this...

<li className={`list-group-item ${todo.completed ? " strike-through" : ""}`}

I now want ${todo.priority} to be included/alongside with this, which will assign classes:

"alert alert-info", "alert alert-warning", and "alert alert-danger" based on corresponding values in a drop down: 1, 2, 3.

Can someone help me with this, thank you in advance!

Upvotes: 16

Views: 25761

Answers (5)

anbu
anbu

Reputation: 1

  const className = {
      'list-group-item': true,
      'strike-through': todo.completed,
      'alert alert-info': todo.priority === 1,
      'alert alert-warning': todo.priority === 2,
      'alert alert-danger': todo.priority === 3,
    }
  let classNameString = "";
  Object.entries(className).forEach((el) => {
    if (el[1]) {
      const str = el[0] + " ";
      classNameString += str;
    }
  });

Upvotes: 0

TacoEater
TacoEater

Reputation: 2268

I think this is what you're looking for:

import clsx from "clsx";

className={
  clsx(classes.firstClass,  
  { [classes.coach]: user.id === "F6E2080B-E61F-416D-8841-3E0249DF2715" })
}

Upvotes: 1

Chris
Chris

Reputation: 59491

Others have already provided some more "flexible" solutions, so I'll just add the quick and dirty one:

<li className={`list-group-item ${todo.completed ? " strike-through" : ""} ${todo.priority === 1 ? "alert alert-info" : (todo.priority === 2 ? "alert alert-warning" : "alert alert-danger")}`} />

For readability's sake:

const completed = todo.completed ? " strike-through" : "";
const priority = todo.priority === 1 ? "alert alert-info" : (todo.priority === 2 ? "alert alert-warning" : "alert alert-danger");
...
<li className={`list-group-item ${completed} ${priority}`} />

Upvotes: 20

Tholle
Tholle

Reputation: 112777

You could keep on adding classes in the same vein, or you could use a library like classnames to make it a bit easier to compose classes.

Example

import React from 'react';
import classNames from 'classnames';

class App extends React.Component {
  // ...

  render() {
    // ...

    const className = classNames({
      'list-group-item': true,
      'strike-through': todo.completed,
      'alert alert-info': todo.priority === 1,
      'alert alert-warning': todo.priority === 2,
      'alert alert-danger': todo.priority === 3,
    });
    return <li className={className}> ... </li>;
  }
}

Upvotes: 6

Ross Allen
Ross Allen

Reputation: 44880

I recommend the classnames package. It's a widely-used package and serves a straightforward purpose. Any key whose value is truthy will make it into the final class name:

import cx from 'classnames';

<li className={cx('list-group-item', {
   'alert alert-danger': value === 3,
   'alert alert-info': value === 1,
   'alert alert-warning': value === 2,
   'strike-through': todo.completed,
})} />

Upvotes: 11

Related Questions