React-responsive-carousel: Dynamic rendering of images updates only main image in carousel but the thumbnail is showing the old images from redux state. Infact, both are taking the images from same object and same property

[JagadishDillikumar]

1. I am having a button to update the image array in redux store. (It is updating correctly.)
2. react-responsive-carousel is taking the image array input from redux store.
3. carousel main image is displaying correctly, if i scroll also, it is showing the updated image array.
4. But, the carousel thumbnails are showing previously updated image array in redux store.
5. If i click the button once again, then only thumbnails and main image in carousel are in sync.

The problem is main image is updating immediately on a single click of the button. Thumbnails is updating on clicking the button twice. That is, thumbnails wants to re-render the component one more time to get updated. This one more re-rendering is tested by clicking some other button which is not relevant to this carousel. The some other button just changes the redux state to re-render the component.

What might be the issue?

[intayush]

Any leads on this issue facing the same behaviour @JagadishDillikumar

[athuldevin]

me too facing same issue. it will be fine if you could provide a force refresh option.

solved it putting key for Carousal

<Carousel key={props.data.img[0]} >

[Schular]

me too facing same issue. it will be fine if you could provide a force refresh option.

solved it putting key for Carousal

<Carousel key={props.data.img[0]} >

Thanks, had similar issue and this fixed it.

[vapaternina]

I don't use Redux, but with a simple input file of various images, thumbs don't show corretly, it show the last one

I mean, I upload 1, and ok... The second is upload in the main image, but does not in thumbs, and so on...

[lgarridoj]

me too facing same issue. it will be fine if you could provide a force refresh option.

solved it putting key for Carousal

<Carousel key={props.data.img[0]} >

I don't use Redux, but with a simple input file of various images, thumbs don't show corretly, it show the last one

I mean, I upload 1, and ok... The second is upload in the main image, but does not in thumbs, and so on...

Try @athuldevin solution, it worked for me. Just put a key in the Carousel:

<Carousel key={image}>

[HPKAdam]

same here, solution to add key not working

[stale[bot]]

This issue has been automatically marked as stale because it has not had recent activity. It will be closed if no further activity occurs. Thank you for your contributions.