How do I change a gif in react with a continious running loop?

Question

I am trying to change the state of an animated a character on a website running in react. The character animations are stored in GIF files and I would like to be able to change the animation based upon user actions. I am thinking of implementing a continuous running loop that checks certain states to play the correct animation.

Does react offer this functionality? Or what would be the optimal way of doing this?

Answer 1

You can render a gif state (of the current animation), then update the state based on the users actions:

this.setState({gif: <url_to_gif>}) if using a class component

or const [GIF, setGIF] = useState(''); then setGIF(<url_to_gif>) if using hooks/function component

Place the code to set the gif wherever you are checking for a user action