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
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.
- classnames – An essential utility for anyone who wants to dynamically add
classNamevalues to React elements. Intuitive syntax can handle even more advanced use cases, like multiple
classNamevalues and even multiple conditions. Click here to learn how to use the
- Ternary operator – Most commonly used approach for setting a conditional
classNamein 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
classNamevalues should apply conditionally, and which should always apply. Click here to learn more about using ternary operator to add a conditional
classNamevalue in React.
- 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
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
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
condition variable and the
<div> will have a
className attribute with a value of
Set up a condition to add
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.
It’s better to define complex conditions and return dynamically generated
className outside of JSX.
You can use
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
Open live demo and click the button that flips the current value of
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.
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
It’s better because if you return an empty string, the transpiled element will still have a
class attribute without any value.
null makes sure that the element will not have a valueless
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.
'redBox' string will be applied as
className only if both conditions
boolean state variable and
2 + 2 === 4 are
Example 4: multiple
className values with a condition
Sometimes you want the React element to have multiple conditional and non-conditional
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:
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
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
In JSX, it’s very common to set
className attribute to a normal string:
In this example, the value of
className attribute will be conditional. It will depend on whether the
error condition is evaluated as
Example 2: Conditionally apply multiple
className values using template literals
In the example above, we conditionally returned only one
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
You can use the same principle to conditionally apply multiple
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
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
Install this package to handle advanced use-cases, like multiple
className values or chaining conditions together.
Example 1: conditionally set multiple
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 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
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
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