React developers often use conditional styling and className values to build interactive web applications in React. I decided to write this guide to teach you how to apply styles and className values based on a condition and dynamically change the appearance of web application. We will explore different options for applying conditional styles and className values.
Inline styles in React
JSX is a templating language for React. It looks like HTML. In a lot of ways, it works like HTML as well. For example, JSX allows you to set inline styles. However, JSX is still JavaScript, so you can use features like a ternary operator to implement dynamic features. In this case, we can use a ternary operator to set inline styles.
One more detail is that you need to use curly braces {} to embed a JavaScript expression inside JSX code. Applying a conditional style in JSX would look something like this:
`<div style={{border: “2px solid black”}}>..contents</div>`
There are few things to note here. First and most important is that styles are stored as key-value pairs in the object. Therefore you need to follow the rules of JavaScript object – property names can not have white spaces or symbols. Some CSS styles are multiple words, so what happens then? Answer: you simply combine these CSS styles into one word. The ‘background-color’ CSS property will be ‘backgroundColor’ property in React. Learn more about that here:
https://simplefrontend.com/set-conditional-classname-in-react/ .
Second, you probably notice double curly braces and wonder why that is. To put it simply, the outer pair of curly braces tells JSX to interpret the following values as a JavaScript expression. The inner pair of curly braces simply opens and closes a JavaScript object.
Conditional styles in React
Unlike normal HTML, we use the className attribute in JSX. We don’t write class because it is a reserved word in JavaScript.
Unlike Vue, React does not have a built-in system for applying conditional styles. We use ternary operator to determine a className value based on a state variable.
State usually holds values that might change as the result of user interaction. So if you have a React web application, you can offer a dark / light mode feature. In that case, you are going to store user’s current choice in the state. If the user currently chooses dark, then the mode state variable would be ‘black’.
Ultimately, dark and light modes are all about appearances. Dark mode is a white text against dark background, and light mode is the opposite. So you would have one of two className values depending on current value of the mode variable.
In JSX, that would look something like this:
`<div className={mode === “dark” ? “darkMode” : “lightMode”}></div>
Once again, we use curly braces to embed a JavaScript expression. Then we use a simple ternary operator to check if current value of the mode state variable equals ‘dark’ string. If it does, we will apply the darkMode className value. If not, we will add lightMode.
Then you can go to CSS file to define these styles like you would in a normal HTML application.