Why does React update the state of the images at the same time if it is the same for everyone?

Question

React

Good evening, tell me please, I have 2 gif pictures - start and stop.
I import them ->

import start from '../../img/start.gif';
import stop from '../../img/stop .gif';

In my smell it is indicated ->

array: [
                {name: 'user1',  animation: false},
                {name: 'user2',  animation: true}
            ],

I have this picture in the map and so that they replace each other I use ->

{this.state.array.map((e, index) => {
i = 'animation' + index
return (
<div key={i} .....
     <img src={e.animation ?  start : stop}  width="20" height="20"/>
</div>
)
})}

Pictures change when boolean changes, but if it is true and true (or false and false), then both pictures are reloaded at the same time, how to avoid this?

Answer 1

let products = [...this.state.animation];
//ваш код
this.setState({products});

Don't change state directly