React library is named after its reactive features. Changes to component’s internal state are almost immediately reflected on the screen.

This isn’t only about displaying different text. Developers can also dynamically customize web app’s appearance by applying conditional styles or conditional className values.

For example, if user enters wrong value into the <input> field, you can instruct React to make borders of the <input> element red.

In this article, we will show how to conditionally add className value to an element in React. There may be multiple className values and variety of conditions as well.

Three different ways to apply a conditional className in React

The focus of this article will be to explain all three approaches to conditionally apply classes in React.

  1. classnames – An essential utility for anyone who wants to dynamically add className values to React elements. Intuitive syntax can handle even more advanced use cases, like multiple className values and even multiple conditions. Click here to learn how to use the classnames() function.
  2. Ternary operator – Most commonly used approach for setting a conditional className in React. Perfectly fine for basic purposes. May be unreadable if the condition is too complex, or if there are too many options. For example, defining which className values should apply conditionally, and which should always apply. Click here to learn more about using ternary operator to add a conditional className value in React.
  3. Template literals – A cleaner, more readable way to apply conditional classes in React without installing external packages. Click here to learn more about using template literals to conditionally customize the appearance of React elements.

Choosing the best approach will depend on how frequently you want to use this feature, complexity of the condition, number of values and so on.

For example, we might want to add className value only if it satisfies two or even three conditions. Or add multiple className values to React elements – some dynamically applied, and others that should always be there.

Let’s start with basics and show a simple example of adding a conditional class in JSX.

className with a simple condition in React

JSX allows you to write JavaScript expressions directly within the structure of component layout.

Let’s look at a simplest possible example:

Just a reminder, className is JSX alternative to class in HTML.

In this example, we set the value of <div> element’s className attribute by using a ternary operator to evaluate the value of condition variable. If it’s true, the value of className attribute will be 'large'. If it’s false, it will be 'small'.

In JSX, JavaScript expressions need to be wrapped with curly braces. Because of curly braces, React evaluates the condition variable and the <div> will have a className attribute with a value of 'large'.

Set up a condition to add className values

We can write an inline condition, like so:

In this example, we check if the value entered into the field contains ‘@’ symbol, to determine if it’s a valid e-mail and style the element accordingly.

For many reasons, it’s better to perform these checks outside of JSX. It’s better to simply reference the outcome of the condition to not have a lot of JavaScript code within JSX.

It’s better to define complex conditions and return dynamically generated className outside of JSX.

You can use if, for, case and other useful syntax outside JSX. You can not do that within JSX.

These statements and keywords are often necessary for setting up a complex condition. Also, you can mix them with logical AND (&&) and OR (||) operators.

Use ternary operator to set conditional className in React

This is the simplest approach to conditionally changing the appearance of elements in React.

Example 1: Conditionally choose between two classNames in React

Here’s another example of a className value that is dynamically generated.

A ternary operator that evaluates the boolean value, and returns 'redBox' strings if it is true, and 'blackBox' if it’s false.

We initialize the boolean state variable to true, so the default className value will be 'redBox'.

clicking the button changes the className value

Open live demo and click the button that flips the current value of boolean variable.

Example 2: Condition to set a className value or not

Sometimes you want to add a className value if the condition is satisfied, but not add any styles if the condition isn’t met.

The best and simplest way is to use JavaScript ternary operator.

If the condition is evaluated to true, JSX will set a conditional className with a green value. If it’s false, JSX will not have a className attribute at all.

This approach is preferable to another common pattern, to return an empty string instead of null.

It’s better because if you return an empty string, the transpiled element will still have a class attribute without any value.

a valueless class attribute

Returning null makes sure that the element will not have a valueless class attribute.

Example 3: Set className with multiple conditions

In previous example, we used just one condition to set the className attribute. It’s also possible to apply classes only if two or even three conditions are true, and not apply them otherwise.

One way to is to chain two conditions together using the AND (&&) logical operator.

The 'redBox' string will be applied as className only if both conditions boolean state variable and 2 + 2 === 4 are true.

Example 4: multiple className values with a condition

Sometimes you want the React element to have multiple conditional and non-conditional className values.

Here is an example where the first className value is conditional, while the other two are always applied:

In this case, we use the + operator to concatenate multiple strings. We conditionally apply the first className string, and concatenate two other strings, regardless of condition.

It’s also important to make sure there are spaces between strings.

The source code for this element will look something like this:

source code conditional class

As you can see, the first className is added conditionally, while the other two are always applied.

Use template literals to set className conditionally in React

Since the release of ES6, web developers can embed JavaScript expressions within strings and dynamically generate string values. Since className values are also strings, template literals are applicable for this purpose as well.

Example 1: template literals to add conditional className in React

Another option is to use string interpolation to generate dynamic values for the className attribute.

In JSX, it’s very common to set className attribute to a normal string:

If you replace the double quotes with backticks, you will gain the ability to embed JavaScript expressions within the string:

In this example, the value of className attribute will be conditional. It will depend on whether the error condition is evaluated as true or false.

To embed JavaScript expression in template literals, you must use the dollar symbol and curly braces, like so:

`${2+2}`

2+2 is the example of a simple JavaScript expression. It will only be treated as such if you follow the formatting rules for embedding JavaScript expressions in template literals.

Example 2: Conditionally apply multiple className values using template literals

In the example above, we conditionally returned only one className value.

In this example, we’ll use template literals to conditionally apply one of three className values, while the other two are always applied:

This is a much cleaner and understandable syntax. It also allows you to manually leave spaces between className values instead of manually adding strings for empty space between class values.

Example 3: Add multiple className values conditionally in React

In previous sections, we set up a condition to add one className value.

You can use the same principle to conditionally apply multiple className values.

Depending on value of boolean state variable, the <div> element is going to have either a `class value of ‘redBox mainDiv padded’ or ‘blackBox secondaryDiv flat’.

Let’s see how flipping the value of boolean state variable changes <div> element’s class value:

Use classnames() function to conditionally apply className in React

Applying conditional styles is a common operation in React. Front-end community banded together to create the classnames library exactly for this purpose. It helps you manage complex relationships between conditions and specific className values.

Install this package to handle advanced use-cases, like multiple className values or chaining conditions together.

Example 1: conditionally set multiple className values

There’s an easy way to set complex conditions and apply className values based on the outcome of conditions.

First, install and import the classnames package.

The classnames function is pretty simple – it takes one argument – an object with key-value pairs.

Keys represent all potential className values. In the example above, the <div> element could have className values of padded, mainContainer, warning, dangerous. However, which of these values are finally applied will depend on key values.

From the example above, padded will always be applied, because it’s value is set to true. The same goes for mainContainer class value. Whether or not the warning class value is applied will depend on the value of error variable. If it’s true (or truthy), then it will be applied. The classnames() function will similarly evaluate the value of criticalError variable to apply the ‘dangerous’ class value.

Example 2: multiple conditions to apply a className value

The classnames() function, imported from the package of the same name, takes one argument – an object. Property is the class that should be conditionally applied, and value is the condition.

You can use the AND (&&) or OR (||) logical operators to chain two conditions together.

Let’s look at an example:

For example, the <div> in the example above will have a class value of padded as long as two conditions connected with && operator are evaluated as true.