How to Toggle a Class in React

React makes it super easy to build a data-driven UI.

One of the most common patterns is to toggle a class on an element based on some state. For example, you might want to show a dropdown menu when a user clicks a button.

In this post, we'll learn how to toggle a class on an element in React.

How to toggle a class in React

Let's start with a simple example. We'll create a button that toggles a class on a div when it's clicked.

JSX
import React, { useState } from "react";

const App = () => {
    const [show, setShow] = useState(false);

    return (
        <div>
            <button onClick={() => setShow(!show)}>Toggle</button>
            <div className={show ? "show" : ""}>Hello</div>
        </div>
    );
}

export default App;

Here, we use the useState hook to create a boolean state variable called show. We then use the onClick event to toggle the state variable.

Finally, we use the ternary operator to toggle the class on the div.

Now, if you want to toggle between two different classes, that is simple.

JSX
import React, { useState } from "react";

const App = () => {
    const [show, setShow] = useState(false);

    return (
        <div>
            <button onClick={() => setShow(!show)}>Toggle</button>
            <div className={show ? "show" : "hide"}>Hello</div>
        </div>
    );
}

export default App;

Here, instead of toggling between an empty string and a class name, we toggle between two different class names.

Conclusion

In this article, we learned how to toggle a class on an element in React.

Simply create a boolean using useState and toggle it using the onClick event. Then, use the ternary operator to toggle the class on the element you want.

Thanks for reading!

• Support Us