SOLVED - addClass only once onClick ReactJS

135

January 19, 2022, at 06:10 AM

Hi I'm new to ReactJS so I'm importing some work of mine to my project and turning it into components. I have a span acting as a button with keyframe animations, but when i load the page it gets animated. One solution i have is to make a .class.animation and give the .animation class on the first click. The thing is that I know how to code it in jquery but not on react.

The idea is to convert this into react:

$('.navTrigger').onClick(function () {
    $(this).addClass('animations');
});

Right now I have this:

const [isActive, setActive] = useState("false");
    
const handleToggle = () => {
    setActive(!isActive);
};
return (
    <span onClick={handleToggle} className={`navTrigger ${isActive ? "" : "animations"} ${isActive ? "" : "active"}`}>
          <i></i>
          <i></i>
          <i></i>
     </span>
);

I have a function where i toggle the active class to run backward and forward animations.

Answer 1

Well, I had to ask on reddit for some help and finally I managed to solve this

function MenuButton() {
    const [isActive, setActive] = useState(false);
    const [animating, setAnimating] = useState(false);
 
    const handleToggle = () => {
        setActive(!isActive);
        setAnimating(true);
    };

    return (
        <span onClick={handleToggle} className={`navTrigger ${animating ? "animations" : ""} ${isActive ? "active" : ""}`}>
            <i></i>
            <i></i>
            <i></i>
        </span>
    );
}

What this does is on web load, the span starts with navTrigger class. The first time you click it its's given animations and active class. And then if you interact with it again it takes out active class and leaves animations there