bug: @ionic/react: ion-slides: Failed to execute 'removeChild' on 'Node'

Bug Report

Ionic version: [cli] 5.2.2 [@ionic/react] 0.0.6

Current behavior: When trying to remove a slide to dynamically generated slides, the following uncaught exception occurs:

react-dom.development.js:9279 Uncaught DOMException: Failed to execute 'removeChild' on 'Node': The node to be removed is not a child of this node.

Expected behavior: The slides should be updated to reflect the correct number of slides, without causing any errors.

Steps to reproduce:

1. Start a new React blank project:
   ionic start slides blank --type=react

2. Use the following Home.tsx template:

import {IonContent, IonHeader, IonTitle, IonToolbar, IonSlides, IonSlide, IonButton} from '@ionic/react';
import React, {useState} from 'react';

const slideOpts = {
    initialSlide: 0,
    speed: 400
};

const Home: React.FunctionComponent = () => {

    const [slides, setSlides] = useState([
        {id: '1', text: 'Slide 1'},
        {id: '2', text: 'Slide 2'},
        {id: '3', text: 'Slide 3'},
        {id: '4', text: 'Slide 4'},
        {id: '5', text: 'Slide 5'}
    ]);

    return (
        <>
            <IonHeader>
                <IonToolbar>
                    <IonTitle>Ionic Blank</IonTitle>
                </IonToolbar>
            </IonHeader>
            <IonContent>

                <IonButton onClick={() => setSlides(slides.slice(1))}>
                    Remove first slide
                </IonButton>

                <IonSlides pager={true} options={slideOpts}>
                    {slides.map(slide => (<IonSlide key={slide.id}><h1>{slide.text}</h1></IonSlide>))}
                </IonSlides>
            </IonContent>
        </>
    );
};

export default Home;

1. Run ionic serve
2. Click on the “Remove first slide” button.

Related code:

https://github.com/m-spyratos/-ionic-react-slides-remove

Ionic info:

Ionic:

   Ionic CLI: 5.2.2 (/usr/local/lib/node_modules/ionic)
   Ionic Framework: @ionic/react 0.0.6

Utility:

   cordova-res: not installed
   native-run: not installed

System:

   NodeJS: v10.16.0 (/usr/local/bin/node)
   npm: 6.10.0
   OS: macOS Mojave

[Finesse]

Here is a workaround. Change the IonSlides key when your slides list changes. It’s not a universal workaround but it’s suitable for some cases:

// When the `item` slides ids don't change
<IonSlides key={item.id}>
  {item.slides.map(slide => (<IonSlide key={slide.id}><h1>{slide.text}</h1></IonSlide>))}
</IonSlides>

// When the `item` slides ids change
<IonSlides key={item.slides.map(slide => slide.id).join('_')}>
  {item.slides.map(slide => (<IonSlide key={slide.id}><h1>{slide.text}</h1></IonSlide>))}
</IonSlides>

It makes the ion-slides be destroyed and created (instead of crashing) on every slides change.

[TylerBurnett]

Any chance this ticket can get an update? This issue is actually quite crippling to ionic display functionality.