A lot of beginner web devs have asked me about applying conditional styles in React. I have finally found time to write this blog post to explain how to apply styles this way.
First off, I will quickly provide some background information to really understand conditional styles. React allows you to apply styles based on current value of a variable. It can be any variable, but input components in React typically store values in the state object. Whenever the state changes, component is rerendered. So if user changes their input, and the appearance of application depends on a state value, then component will be updated, and styles might change.
If you’ve ever tried switching from a dark to a light theme, this is why the change is so fast. Web apps you use are likely built in React (or similar front-end framework). They don’t have to reload. They store user’s inputs in the state, and if the user changes their selections, the styles for HTML elements change with it. This is an excellent guide on implementing dark mode in React web apps.
With that being said, let’s get back to the topic of using ternary operators for conditional styling in React. This is more common and easier to do than you might think.
Like in normal HTML, you can set inline styles to React elements in JSX. Even more importantly, JSX allows you to set style attribute to a JavaScript expression.
Inline styles in JSX are similar to those in HTML, but also different in few important ways. For once, they are not a string or a text. inline styles in React are formatted as objects, where object property is the CSS property, and the value is the style choice.
Since it’s just a normal JavaScript object, you can easily add ternary operators to conditionally style React elements. Let’s take a look at one example:
<div style={{backgroundColor: dark ? “black” : “white” }}></div>
In this case, the <div> element is conditionally styled. You can go even further and nest multiple ternary operators to implement a if/else scenario. It will not be readable, but you can technically do it.
Using ternary operators to style elements is common practice among React web developers. It’s important to remember the syntax, especially if you’re going to nest multiple ternary operators or use them frequently.
If your conditions are too complex, your JSX query might become too confusing and difficult to follow. In that case, you can take the entire styles object out of the JSX code. Define it somewhere else. Add as much complexity and as many nested ternary operators as you’d like. Then in JSX, you can simply set the style attribute to reference of that object.
Overall, inline styling is a great feature for developers. It’s simple and often times effective. However, as your experience grows, you may want to explore other options for dynamic styling in React. For example, libraries like styled-components.
One alternative is to define a normal class, and add className conditionally in React. This is particularly useful when there are multiple styles that need to be conditionally applied. You can re-use the same class on multiple elements in JSX.