Table of Contents
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.
JSXimport 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.
JSXimport 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!
- Getting Started with TypeScript
- Getting Started with Svelte
- Git Tutorial: Learn how to use Version Control
- How to Set Up Cron Jobs in Linux
- How to deploy a .NET app using Docker
- Best Visual Studio Code Extensions for 2022
- How to deploy a Deno app using Docker
- Learn how to use v-model with a custom Vue component
- How to Scrape the Web using Node.js and Puppeteer
- Getting Started with React
- Getting Started with Vuex: Managing State in Vue
- Setting Up a Local Web Server using Node.js