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

Issue

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?

Solution

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

Answered By - Dr. Bright

Answer Checked By - Senaida (PHPFixing Volunteer)