How to Conditionally Apply CSS Classes to a React Component

Conditionally assign classes based on an object property

Consider we had to display information on some tickets in a ticket or issue tracker. The ticket structure might look something like this:

const tickets = [
  {
    id: 1,
    subject: "windows not working",
    description: "I closed the window, but still nothing. Should I try closing the drapes?",
    status: "Closed"
  },
  {
    id: 2,
    subject: "slow download",
    description: "It takes 3 hours to download a 100mb file",
    status: "Open"
  },
  {
    id: 3,
    subject: "broken button",
    description: "Its not letting me press the sign in button.",
    status: "Open"
  },
]

Each of these tickets has a property called status which can either be “Open” or “Closed”. We want the displayed tickets to change their values as well as their styling depending on the value of their status property. If the ticket is “Open” we want to style it with a red background. If the ticket is “Closed” we want to style it with a purple background.

We can accomplish this by using a ternary operator in JavaScript. Our ternary will check if the ticket is open or not and conditionally apply CSS classes.

In the example below, the component starts off with the class badge. We use JavaScript string interpolation - the dollar sign, and curly braces, wrapped by back-ticks ${} - to include JavaScript in a string:

<span
 className={`badge${ ticket.status === "Closed" ? " purple" : " red" }`}>
  {ticket.status}
</span>

The CSS classes above would be applied to match the following situations:

// when the ticket is `Closed`
<span className="badge purple" >
  Closed
</span>

// when the ticket is `Open`
<span className="badge red" >
  Open
</span>

(notice the spaces are included, otherwise the string would be concatenated into one word) If your component doesn’t start off with any classes, you would just omit the class badge and remove the spaces before the classes that you want to conditionally apply:

<span
 className={`${ ticket.status === "Closed" ? "purple" : "red" }`}>
  {ticket.status}
</span>

The CSS classes above would be applied to match the following situations:

// when the ticket is `Closed`
<span className="purple" >
  Closed
</span>

// when the ticket is `Open`
<span className="red" >
  Open
</span>

Conclusion

Try conditionally applying CSS classes to some of your React components in a project and let me know how it goes! You can find me on: Twitter, LinkedIn, or Github

#guide, #css, #javascript, #react