-1

So I want to build an Auth page, and what to show a button that shows a male icon but to be fair to the other gender I want to switch between them like animation between female icon and male icon with an interval for example 2-3 seconds, can't find solutions.

const [icon, setIcon] = useState('male')

{

 icon === "male" ? <MaleSvg/> : <FemaleSvg />

}

I don't know how to change the state between those two options, I think something with useEffect or similar

hegibo2346
  • 41
  • 1
  • 6
  • This should help you out: https://stackoverflow.com/questions/53024496/state-not-updating-when-using-react-state-hook-within-setinterval – freefall Nov 02 '21 at 21:55

1 Answers1

0

Using setInterval inside React components allows us to execute a function or some code at specific intervals

  ...
  const [isMale, setIsMale] = useState(true);

  useState(() => {
    const interval = setInterval(() => {
      setIsMale((prevState) => !prevState);
    }, 3000);

    return () => clearInterval(interval);
  }, [isMale]);

  ...

  {isMale ? <MaleSvg /> : <FemaleSvg />}
Ezequiel Martinez
  • 26
  • 2
  • Did you intend to use `useEffect` to manage time intervals instead of `useState`? At least it looks like this. And you don't need `isMale` in dependencies, right? – Ruslan Zhomir Nov 02 '21 at 23:40