Styling elements conditionally is one of the most common tasks in React. Experienced developers have mastered this skill very well. I’m writing this tutorial to also help beginners figure out how to dynamically change the appearance of React web applications.
Embed JavaScript expressions inside JSX
If you didn’t already know, JSX is a templating language. You can write React apps without it, but most React developers write their apps in JSX because it’s readable and allows us to easily configure the layout.
JSX is essentially JavaScript disguised as HTML. This allows us to embed dynamic JavaScript expressions directly in the layout. For example, you can use a ternary operator to apply one className value or another.
Let’s look at an example:
<div className={condition ? “dark” : “light”}><p>some text</p> </div>
There’s a lot to unpack here. First of all, why do we use className? Because class is a reserved word in JavaScript. As we already said, JSX is syntax sugar to make JavaScript look like HTML, but it’s still JavaScript. Therefore we can not use the class attribute. Instead we use className.
Second, why do we need curly braces? Because they allow us to implement a JavaScript expression inside JSX. The compiler knows that everything between two curly braces is JavaScript and should be evaluated as such.
Other than that, everything is pretty simple. Between curly braces, we have a simple ternary operator that returns either of two string values, depending on whether condition evaluates as true or false.
Inline styles in React
We can also have inline styles in JSX. It works similarly to HTML. We set the style (or styles) attribute to inline styles we want to apply. One small difference is that we set this attribute to a JavaScript object. Not a string like we do in HTML.
JavaScript objects should follow certain rules. For example, you can not have hyphens, symbols, or empty spaces in property names. This is confusing because some CSS properties do have hyphens. For example, ‘background-color’. To set the background color as inline style in React, you’ll have to write backgroundColor. Something like this:
<div style={{backgroundColor: “white”}}></div>
Note that the value of backgroundColor property is a string. We use double curly braces because one pair denotes a JavaScript object, and another specifies that we are embedding JavaScript expression in JSX.
Multiple conditions and multiple classes
We can still use a ternary operator to apply a className or a style only if multiple conditions are satisfied. This isn’t very readable though. It’s much better to use a package like classNames() to apply multiple conditional classes. This article describes the process very well:
https://simplefrontend.com/set-conditional-classname-in-react/
You can also use template literals, but eventually you will run into the problem of readability.
As for inline styles, styled-components is an excellent library that allows you to inline style components without spending too much time.