Author: b4qzy

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.

Once upon a time, users had to refresh pages to see new posts and notifications on social media. The same for receiving any kind of updates. No one really thought about it, but Facebook realized there was a room for improvement. They launched React and web development was never the same again. Thanks to React, UX has dramatically improved and users set higher expectations every year.

These days, React is the most popular library for building interactive user interfaces. In this article, we will look at most important concepts in React.

Virtual DOM

React maintains a shadow copy of the DOM. Data displayed on the page is stored in the state and props. Whenever any data changes, React calls the render() method to update the page.

Virtual DOM is very efficient, so it can afford to update the entire component tree. Then React compares virtual DOM with the real DOM and settles differences. This ensures efficiency of the web application. It also ensures that web applications always display the most recent updates.

State, props, single-way data flow

In React, state is the object that stores current ‘status’ of the component. For example, if a new post needs to be displayed, the id of the new post would be added to the state. As you know, changes in the state (and props) also triggers update of the page.

State is often used for dynamic functionalities. For example, dynamic rendering of certain elements or components. State values are also used to conditionally style elements using inline styles or className values.

React recommends to store state data in the component at the top of the tree. This is called a ‘single source of truth’. Every component in a web application should receive data from the main parent component.

Finally, this brings us to props. This is how parent component passes data down to children components. In JSX, you can define props as simple custom attributes on React elements and custom components. Props can be passed from parent components to children, not the other way round. This is called single-way data flow.

JSX

React comes with a custom templating language JSX. It looks like HTML, but JSX is actually JavaScript. This template language allows you to build components, which are essentially small parts of a website. JSX defines what the component should look like and what elements it contains.

Other front-end frameworks like Angular require a separation of logic and presentation. JSX combines presentation and logic. JavaScript expressions can be easily embedded. To do this, you need to wrap JavaScript expressions in curly braces.

You can embed JavaScript expression as prop or attribute values. You can also embed them as contents of JSX elements. React developers often use the map() method to create React elements and components by looping over objects in the array in React.

In JSX, you can conditionally display error messages, or even hide entire components depending on state values. You can’t use getElementById() method, but you can use refs to the same effect. SimpleFrontEnd had a great article on using refs to scroll to a specific element in JSX:

https://simplefrontend.com/react-scroll-to-bottom/.