ReactJS Conditional Classname

You will have a situation where you need to set the conditional classname in ReactJS. You can detect the user interaction and set conditions classname. For example, if users click the button, we can change the button color. It allows you to create more interactive and responsive user interfaces. And you can create styles using classname and apply different visual treatments to elements based on specific conditions. By using this feature, you can create dynamic and adaptive UI elements that respond to user interactions, data changes, or application states.

2 Methods to implement conditional class name

We can use conditional statements, such as if-else or ternary operators, to implement conditional class names in ReactJS. Let’s see with the ternary operator.

Using Ternary Operator

Step 1: Import React and CSS file

import React from 'react';
import './App.css'

First, you need to import the React files and then import the CSS files containing the class styles you want to use conditionally. You can use the import keyword to import your files.

Step 2: Define the component

Create a component, you can class or functional components and pass the necessary props.

App = ({ isActive }) => {
  return (
// your code here...
  );
}
export default App

In this example, we have created the function ‘App‘ and the ‘isActive‘ prop determines the condition for applying the class name. In the return() method, we’re going to apply the conditional class name.

Step 3: Apply the conditional class

Inside the component return statement, we’ll apply the condition class for <div> element. And we have to write the below code inside the return() method of the previous step.

<div className={isActive ? 'active' : 'inactive'}>
  {<p>This is my paragraph text</p>}
</div>

Here, we set the conditional classname by using the ternary operator (? :). In this case, if ‘isActive’ is true, the class name “active” will be applied; otherwise, “inactive” will be applied.

Step 4: Set styles for both classnames

Set some styles in CSS to both class names to find out which class name is applied.

.active{
    background-color: red;
    padding: 5px;

}
.inactive{
    background-color: grey;
    padding: 5px;
}

In this example, we have set the red background color for “active” class and grey background color for “inactive” class.

Step 5: Rendering the component

To display our component we need to render. We use ReactDOM.render() to render the APP component to all HTML elements that have the ID name “root”.

ReactDOM.render(
   <App isActive={true}/>,
   document.getElementById('root')
)

In this example, the ‘isActive’ prop is set to true, the “active” class will be applied and the red background will display. If you set the “isActive” prop to false, the “inactive” class will be applied.

Output:

Using a Conditional Function

You can also use this method to set the condition className in React for elements. In this method, we’ll create a separate function for setting conditional className.

Step 1: Define a helper function that returns the desired class name:

function getClassName(isActive) {
  if (isActive) {
    return 'active';
  } else {
    return 'inactive';
  }
}

In this code, we have created the function “getClassName()” by passing the “isActive” prop. Inside the function, we use the if/else statement to set conditions for class names. We tell if the “isActive” prop is true, the class name “active” will be applied; otherwise, “inactive” will be applied.

Step 2: Define your component:

function App({ isActive }) {
  return (
    <div className={getClassname(isActive)}>
      {<p>This is my paragraph text</p>}
    </div>
  );
}

Here, the getClassname function is called with the isActive prop to determine the class name dynamically based on the condition. You can also set CSS styles for both class names “active” and “inactive” like the previous method to determine which class name is selected.

Step 3: Rendering the component

Finally, we have to render the component as in the previous method to display our content.

ReactDOM.render(
<App isActive={false}/>,
document.getElementById('root')
)

Here, we set the isActive prop is set to false, so the “inactive” class will be applied and the brown background will display. The output will be:

Conclusion

So, the conditional class names in ReactJS empower to the creation of dynamic and responsive (UI) user interfaces based on user interaction. By utilizing conditional statements, we can easily set the class names based on specific conditions and enable the creation of interactive components.