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

Rent Charter Buses Company
READ ALSO
Can&#39;t understand code of getRefreshKey in Android paging3 codelab

Can't understand code of getRefreshKey in Android paging3 codelab

This is the code of getRefreshKey function of the paging3 codelab

166
Regular expression help - comma delimited string

Regular expression help - comma delimited string

I don't write many regular expressions so I'm going to need some help on the one

203
For the code given what will be stored in ArrayList? What are shallow pointers in Java?

For the code given what will be stored in ArrayList? What are shallow pointers in Java?

Suppose we have three Bear objects: momma, poppa, and babyWe create a "bears" ArrayList and add pointers to the three bears to the ArrayList

119
Change Default Download Location in Php

Change Default Download Location in Php

I want to change default download location in php Using header function I cant' find a parameter for that This is the definition of header

144