React Deleting Slide from array

[ajaypillay]

Hi, I can't seem to figure out how to delete a slide at the current index which is rendered from an array. Code Sandbox link here.

I have tried:

function deleteSlide() {
    swiper.current.swiper.removeSlide(currentIndex);
    var temp = slides;
    temp.splice(currentIndex, 1);
    setSlides(temp);
}

But the problem is that it does a double delete when the state updates. If I only run removeSlide, it removes the slide but my array is not updated. If I do anything else, my array updates but the slides don't update until I do a swipe. Adding slides to the end of the array so far works fine.

Without explicitly calling removeSlide, I tried the following:

useEffect(() => {
    swiper.current.swiper.update();
}, [slides]);

But I'm not quite sure why this isn't actually updating the Swiper instance, according to the docs that's what I believe it should be doing. I recognize that this isn't being called when the state updates in deleteSlide either, and I'm not entirely sure why.

The ideal behavior is that the current view stays put, and when the current slide is deleted, the slide at index + 1 slides into position. If you delete the very last slide, then you slide to the 2nd last slide and the last slide gets deleted. I can take care of this as long as I can actually update the Swiper instance correctly.

How should I go about this? Appreciate any help, thank you.

[ajaypillay]

Managed to solve this:

function deleteSlide() {
    var temp = [...slides];
    temp.splice(currentIndex, 1);
    setSlides(temp);
}

Just had to use the spread ... operator to copy the array correctly. Although it is worth noting that this resets the state for all the other rendered slides, I need to figure out how to fix that.

EDIT: 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.