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.
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.
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!
If you want to learn about web development, founding a start-up, bootstrapping a SaaS, and more, follow me on Twitter! You can also join the conversation over at our official Discord!
Leave us a message!