bug: @ionic/react: ion-slides: Layout breaks when adding slides dynamically

Bug Report

Ionic version:

[cli] 5.2.2 [@ionic/react] 0.0.6

Current behavior:

When slides are being added dynamically, the layout of the slides component breaks and newly added slides sit outside of the swiper-wrapper. Issue persists even after calling component’s update() method.

Expected behavior:

When adding additional slides, slides component should be updated to properly display those added slides.

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 from 'react';

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

class Home extends React.Component<any, any> {

    private _slidesRef = React.createRef<any>();

    constructor(props: any) {
        super(props);
        this.state = {
            slides: [
                '1 Slide',
                '2 Slide',
            ]
        };
    }

    onSlidesAdd() {
        this.setState({
            slides: [
                '1 Slide',
                '2 Slide',

                '3 Slide',
                '4 Slide',
                '5 Slide'
            ]
        }, async () => {
            await this._slidesRef.current.update();
            console.log('IonSlides updated, but issue persists');
        });
    }

    render() {
        const {slides} = this.state;

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

                    <IonButton onClick={() => this.onSlidesAdd()}>
                        Add slides
                    </IonButton>

                    <IonSlides ref={this._slidesRef} pager={true} options={slideOpts}>
                        {slides.map((slide: any) => (
                            <IonSlide key={parseInt(slide)}>
                                <h1>{slide}</h1>
                            </IonSlide>
                        ))}
                    </IonSlides>
                </IonContent>
            </>
        );
    }
}

export default Home;

1. Run ionic serve
2. Click on the “Add slides” button.

Related code:

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

Other information:

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

[lai5203]

I faced this probelm also but I get to fix it.

I think the IonSlides did not re-initialize when prop [slides] updated from empty array.

The possible solution will be

{ slides.length > 0 &&
        <IonSlides ref={this._slidesRef} pager={true} options={slideOpts}>
               {slides.map((slide: any) => (
                   <IonSlide key={parseInt(slide)}>
                       <h1>{slide}</h1>
                   </IonSlide>
               ))}
          </IonSlides>
}

[zain-naveed]

 <IonSlides options={slideOptsOne} **key={Object.keys( page708).length > 0 ? Object.keys((page708 as any).content_json).map(slide => slide).join('_'):1}**   >
 
`</IonSlides>`  

in my case break the ionslides ui but i’ll add the key in ionslides they working fine