Suppose you don’t know how to toggle a class on click in React. We will give you some solutions to do it in this article. Follow us.
Toggle() in JavaScript
In javascript, we have the Toggle() method, if the element already has that class, Toggle() will remove it, and vice versa if the class does not have it, it will be added to the classlist. The example below will show you how it works.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Subscribe</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<button class="active">Subcribe</button>
<script type="text/javascript">
var sub = document.querySelector("button");
sub.onclick=function(){
x.classList.toggle("active");
}
</script>
</body>
</html>So after you press the subscribe button, the button’s classlist will add or remove the “active” class based on whether it is already in the classlist or not.
Toggle a class on click in React
Now you know what Toggle means and how it works. But if you don’t know how to toggle a class in React, here are some ways.
Toggle the class with null
We can toggle a class in React using useState() hook.The example below will show you how to do it.
Code:
import React, { useState } from "react";
export default function App() {
const [active, setActive] = useState("true");
const handleToggle = () => {
setActive(!active);
};
return (
<div >
<h1>Youtube channel</h1>
<button
onClick={handleToggle}
className={active ? "active" : null}>
Subscribe
</button>
</div>
);
}At first, we define active state using useState() hook in Reactjs. After we click on the button Subscribe, the handleToggle function is called. The active state is set with the opposite value as it was before.
Toggle between two different class
If you want to toggle between two different classes, the example is how you do it in Reactjs. Follow the example below to understand more about this method.
import React, { useState } from "react";
export default function App() {
const [isVisible, setVisible] = useState("true");
const handleToggle = () => {
setVisible(!isVisible);
};
return (
<div>
<h1 className={isVisible ? "visible" : "invisible"}>Ads</h1>
<button onClick={handleToggle} >Hide it!</button>
</div>
);
}So you want to hide the ad when pressing the “hide it!” button by toggle class. We use useState() hook to create state isVisible. If you click the button “hide it!”, similar to the example above, the state isVisible will be toggled between “visible” and “invisible” values.
Summary
The above article has shown us how to toggle a class on click in React. There are many ways to do it, but we show you two simple ways Toggle the class with null and Toggle between two different class.
Maybe you are interested:
- Setting a background image with inline styles in react
- Call multiple functions onClick in React
- Set the default checked value of a Checkbox in React
Hi, my name’s Nathaniel Kirk. I’m interested in learning and sharing knowledge about programming languages. My strengths are C, C++, Python, HTML, CSS, Javascript, and Reactjs. If you have difficulty with them, don’t worry. I’m here to support you.
Name of the university: PTIT
Major: IT
Programming Languages: C, C++, Python, HTML, CSS, Javascript, Reactjs