How To Toggle A Class On Click In React

Toggle a class on click in React

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:

Leave a Reply

Your email address will not be published. Required fields are marked *