1

I want to add class again and again on click handleClick in minicart I got two separate components one component contain the handleClick and other component is the minicart.

Is there any way I can do this? I am trying this code on handleClick but this doesn't work

useEffect(() => {
    document.querySelector("#minicart-id").classList.add('animate-bounce');
});

If I try this without useEffect it works but it only add class one time.

Tech with coding
  • 31
  • 1
  • 6
  • Please clarify your specific problem or provide additional details to highlight exactly what you need. As it's currently written, it's hard to tell exactly what you're asking. – Community Oct 09 '22 at 04:31

1 Answers1

1

If you want to play the animation again and again, you have to add and remove the className from the span.

First store the classNames inside a state.
Second you have to add the animate-bounce class when you increase the cart items.
Third you need a useEffect where you remove the animate-bounce class after the animation time, for example:

const [classNames, setClassNames] = useState();

useEffect(() => {
  let timer;
  if (classNames === "animate-bounce") {
    timer = setTimeout(() => {
      setClassNames();
    }, 1000);
  }

  return () => clearTimeout(timer);
}, [classNames]);
Lollergalad
  • 136
  • 2
  • Thanks for help but I am not able to implement this will you please tell me more how I can implement on the JSX like I show above in the question for span and I also tell the which const is increasing so I want to re-add the class for the bounce animation or do you have any other suggestion you can share – Tech with coding Oct 08 '22 at 12:08
  • Just create a handleIncrease function for the add cart button onClick event and when you increase the number of the added items, set the new classname as well: `setClassNames("animate-bounce")`, and don't forget to use the state: `...` – Lollergalad Oct 08 '22 at 22:06