Deleting a slide in SwiperJS mapped with an array without the state resetting

user_8714992 0
Viewed 281

I've been wrestling with this issue for quite a while now, but have not been able to figure this out. Code Sandbox demo here.

I have a set of slides rendered with SwiperJS. I need to render this through mapping an array out. I have been able to push to the back of this array successfully, but deletion is an issue. There are two ways of doing this. First, I can delete the element at a specific index by changing the state of my array. This "works" but the problem is that the state of each rendered component is not saved.

I know that there is a removeSlide() function but the issue is that the array mapping then gets messed up because if I delete from my array as well, it's a double delete.

Now I think that directly modifying the array in my state is the way to go, but there's a problem with the components being rendered all having their states reset. In the linked sandbox, you can reproduce this by adding any number of slides, randomizing the states on each slide, and then deleting the current slide. All their states will be reset due to the re-render.

Here's a video of it happening. In this video, I add a slide, randomize the state in both of the slides, then delete the first slide. The state of the 2nd slide (which is now the 1st slide) will be reset. This happens to any arbitrary number of slides:

SwiperJS slides state being reset

Sincerely appreciate any help, thanks!

swiper.js reactjs javascript
1 Answers

Updated Code Sandbox. To prevent re-rendering of all other array elements, the key of each element must be unique across renders. Fixed by setting the key to be a count, which is strictly increasing.

I missed this very important fact that for non-static arrays, you cannot use the index of the array as the key, because this will trigger re-renders when elements are reshuffled/deleted, and hence the key should be something that is unique for every element, and persists across array changes. A simple ID based on an incrementing counter works well for this in most use cases.

user_87149920
Related