Conditionally assign a CSS class to a React component

How to assign a CSS class based on an object property

Let's say we need to display some data that has this structure:

const groceries = [
  {
    id: 1,
    name: "bananas",
    purchased: false
  },
  {
    id: 2,
    name: "apples",
    purchased: true
  }
]

One of the properties of these grocery objects is purchased.
purchased is a boolean property and can be true or false.
When we display these items, we want to style them differently depending on their purchased property.
If the item is purchased, we want to add the CSS class of purchased to the className property of the component.
If the item is not purchased (purchased: false) we want to display the item normally.

For this purpose, we can use a ternary operator to check if the item has a property of purchased set to true. If it does, we add the class purchased to the element.
We can then style the purchased class differently, for example adding a line-through style.

<div className={props.item.purchased ? 'purchased' : ''}>

The example above assumes we don't already have any other class on the div.
What if we already have a class name and need to add an additional purchased class?

In this case we can take advantage of the Javascript string interpolation syntax that uses a dollar sign and braces inside back-ticks to interpolate Javascript in a string, like this:

<div className={`item${props.item.purchased ? ' purchased' : ''}`} >

This example is a little tricky to understand, let's look at it in detail.
We first add the item CSS class in the backticks. We then start the interpolation syntax with the dollar sign and inside the brackets we place a ternary operator that checks the value of the purchased property of the item.

If the property is true we then add a string that starts with a space (to separate it from the existing class) and then the purchased string.
The result will be an html element that looks like this:

// when purchased is false:
<div class="item">

// when purchased is true:
<div class="item purchased">

That's how we use ternary operators to conditionally specify CSS classes on React components.

Comments

[James Chapman]

Another option is to use an npm package called Classnames npmjs.com/package/classnames

It allows for more complex logic and deals with duplication and spaces in between.