Multiple CSS conditional classes using React
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}`} />
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" })
}
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>;
}
}
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,
})} />