3 ways for toggle a class in React

In this tutorial, we are going to learn how to dynamically toggle the CSS classes in a React app. CSS styles play a vital role in styling the overall app. With proper styling, we can give an intuitive UI and interactive user experience through the app. While using CSS styling using class in React app, there will be a lot of cases in which we will need to dynamically change the class of the element to change the overall style in response to some triggered event. Here, we are going to learn how to do that in three different ways.

1.Toggling the class

The first one is to toggle the class state by using the Boolean state value. If true, we add the class name to the className property otherwise, we return null which will have no styles as all. The typical example is provided in the code snippet below:


  const [isActive, setActive] = useState("false");
  const ToggleClass = () => {
    setActive(!isActive); 
   };
  return (
    <div className={isActive ? "active" : null"}>      
      <h1>Hello Devdojo</h1>
      <button onClick={ToggleClass}>Toggle class</button>    
    </div>
  );

Here, we have set the isActive state to false at the beginning. Now, based on the isActive Boolean state, there is the conditional setting of the class name in the className property. The ToggleClass function changes the state of the isActive state. And based on the isActive state, the class name is set to active or null.

2.Toggle between two class names

The second way is not too different than the first one. Here, every logic is the same but instead of appointing the null value, we are replacing it with another style class called inactive. Now, if the isActive state is true, then the active style is rendered else the inactive style is rendered. The standard example is provided in the code snippet below:


  const [isActive, setActive] = useState("false");

  const ToggleClass = () => {
    setActive(!isActive);
  };
  return (
    <div className={isActive ? "active" : "inactive"}>  
     <h1>Hello Devdojo</h1>
      <button onClick={ToggleClass}>Toggle class</button>
    </div>
  );
}

3.Using String Concatenation

Now, the third one is to concatenate the string value on the common style name. This is very useful in the case where we have the same initials for class names with different tail endings. The concatenated value is dynamically set based on the isActive Boolean state. The logic of conditional setting is the same as the above two. The standard example is provided in the code snippet below:


  const [isActive, setActive] = useState("false");

  const handleToggle = () => {
    setActive(!isActive);
  };
  return (
    <div>      
      <h1>Hello Devdojo</h1>
      <button onClick={handleToggle} className={`button-${isActive ? "danger" : "success"}`} >
        Toggle Button State
      </button>
    </div>
  );

If the isActive is true, then the following template will render:

      <button className="button-danger">
        Toggle Button State
      </button>

If the isActive is false, then the following template will render:

<button className="button-success">
        Toggle Button State
 </button>

Conclusion

The main goal of this tutorial was to explain the toggling of CSS style class in React app in simple words. All three ways are used on the basis of different scenarios presented in the UI. Make sure to grasp the concept easily, so that you can apply it where it is necessary. It helps to keep the overall code clean as well.

🤩 Our Amazing Sponsors 👇