React is a great tool for building interactive, responsive web applications. One of its great features is that you can maintain a state object. This is basically ‘state’ of data necessary for the application to function. If that data changes, then the application needs to update, respond to those changes. That’s what React does, and it’s one of the integral concepts of the UI library.
State facilitates changing the appearance of React elements when something changes. For example, highlighting the field that contains an invalid value. Or displaying full post when user clicks a button. Users love features like that, because it communicates what’s going on in the app. Imagine, what’s better: a standard black paragraph text that tells you there has been an error, or a red text with an icon telling you the same, and also highlighting the form field that contains wrong value? Obviously, it’s the second. It is for me, and it is for a lot of people.
In React, there are multiple ways to customize the appearance of elements depending on user’s input. Input values should be stored in the state, and then JSX templating language allows you to set className attribute conditionally. For example, there is a checkmark, it is either checked or not checked. Current status of the checkmark could be stored as a Boolean value in the state.
Then in JSX, you can specify the className attribute and set it to a conditional value. Fortunately, JSX allows you to embed dynamic JavaScript expressions in your React elements. So you can set className attribute to a ternary operator, which evaluates state variable (Boolean), if that Boolean is true, it will return one className value. If it’s false, ternary operator will return another className. You can even nest multiple ternary operators.
Let’s take a look at the code example:
<div className={dark ? "darkMode" : "standard"}></div>
This is just one of the ways to add conditional className values in React. You can also use little ES6 feature called template literals. These are essentially strings, that allow you to embed dynamic values in them.
The syntax for template literals is straightforward. Let’s look at an example:
<div className=`${classValue}`></div>
We use backticks (`) to open and close template literals. And use the dollar sign ($) and curly braces {} to embed a dynamic value.
Finally, there’s also classnames() function, which you can import into your app. It is an external utility, but probably the simplest way to set multiple conditional classNames in React.
You can also use it to conditionally add some classes, and always add other classes. In short, string arguments to the classnames() functions are passed unconditionally. To add a conditional className value, you need to pass it as an object. The className value itself should be the property in the object, and its value should be a Boolean (or an expression that evaluates to a Boolean). The className value will be passed if its value evaluates to true.
