How do I append a component slide in React?

[ajaypillay]

Hi, if I wish to append slides and I wish to pass in the isActive state, how should it be done? I wish to do something along the lines of:

swiper.current.swiper.appendSlide(
<SwiperSlide>
    {({ isActive }) => (
        <MyComponent arg1={arg1} arg2={arg2} active={isActive} />
    )}
</SwiperSlide>)

But this obviously does not work as it is expecting raw HTML. My component needs to know if it is currently active.

EDIT: I managed to append a static component by doing:

swiper.current.swiper.appendSlide(
renderToString(
<SwiperSlide>
    {({ isActive }) => (
        <MyComponent arg1={arg1} arg2={arg2} active={isActive} />
    )}
</SwiperSlide>))

But no event listeners are attached, how should I be attaching the event listeners?

[nolimits4web]

https://codesandbox.io/s/swiper-react-dynamic-slides-forked-b11r7

[ajaypillay]

To link to the issue at large - I was having an issue correctly deleting an element from an array which is why I traveled down this route, which turned out to be the wrong way of going about this.

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.