title: ion-slides - dynamic amount of slides
body: <ul>
  <li>OS: Win10 Pro</li>
  <li>Ionic version: <code>CLI 6.6.0</code></li>
  <li>Node version: <code>v14.0.0</code></li>
  </ul>
  
  <p>I'm working with the <a href="https://ionicframework.com/docs/api/slides" rel="nofollow noreferrer">IonSlides</a> component and I'm running into <a href="https://github.com/ionic-team/ionic/issues/18784" rel="nofollow noreferrer">following issue</a>.<br />
  I have an array of dates and have to create a <code>IonSlide</code> component for each of these dates. The user has the possibility to rearrange the start and end date. If the length of the dates array differs from the previous length, the layout breaks.<br />
  I managed it to manually call the <a href="https://swiperjs.com/api/" rel="nofollow noreferrer">Swiper API</a>, and with this workaround the slides correctly appear.<br /><br /></p>
  
  <p>Currently a colleague on MacOS is running into following error message, which I don't get on Windows (same Ionic and Node version):</p>
  
  <pre><code>Unhandled Rejection (TypeError): Cannot read property 'length' of undefined
  Swiper.removeAllSlides
  node_modules/@ionic/core/dist/esm-es5/swiper.bundle-3fe6462e.js:2415
  workaround
  src/components/Slides/Slides.tsx:31
    28 | const workaround = async() =&gt; {
    29 |   // https://swiperjs.com/api/
    30 |   let swiper = await this.slidesRef.current.getSwiper();
  &gt; 31 |   swiper.removeAllSlides();
       | ^  32 |   swiper.appendSlide(this.props.slides.map((slide, i) =&gt; {
    33 |     return ReactDOMServer.renderToString(&lt;Slide slide={slide} key={i} /&gt;); // redundanter code
    34 |   }));
  </code></pre>
  
  <p>Furthermore after calling <code>swiper.removeAllSlides();</code> and rebuilding the slides, the scrollbar is missing. Anyone has a hint, how I can improve it?<br /><br /></p>
  
  <p><code>Slides.tsx</code> (inside of the <code>Slide</code> component I'm using the <code>IonSlide</code> component)</p>
  
  <pre class="lang-js prettyprint-override"><code>import { IonSlides } from '@ionic/react';
  import React from 'react';
  import ReactDOMServer from 'react-dom/server';
  import './Slides.css';
  import Slide from '../Slide/Slide'
  import SlideObject from '../../models/SlideObject';
  import SlideOptsObject from '../../models/SlideOptsObject';
  
  interface SlidesProps {
    slides: Array&lt;SlideObject&gt;,
    slideOpts: SlideOptsObject
  };
  
  interface SlidesState {
  };
  
  
  class Slides extends React.Component&lt;SlidesProps, SlidesState&gt; {
    private slidesRef = React.createRef&lt;any&gt;();
  
    // wenn sich die slides geaendert haben -&gt; aktualisieren
    componentDidUpdate(prevProps: SlidesProps) {
      if (this.props.slides.length !== prevProps.slides.length) {
        // update() einkommentieren, wenn workaround gefixt, https://github.com/ionic-team/ionic/issues/18784
        // this.slidesRef.current.update();
  
        const workaround = async() =&gt; {
          // https://swiperjs.com/api/
          let swiper = await this.slidesRef.current.getSwiper();
          swiper.removeAllSlides();
          swiper.appendSlide(this.props.slides.map((slide, i) =&gt; {
            return ReactDOMServer.renderToString(&lt;Slide slide={slide} key={i} /&gt;); // redundanter code
          }));
          swiper.update();
          swiper.slideTo(this.props.slideOpts.initialSlide); // zur letzten Slide sliden
        };
        workaround();
      }
    }
  
    render() {
      return (
        &lt;IonSlides ref={this.slidesRef} /*pager={true}*/ scrollbar={true} options={this.props.slideOpts}&gt;
          {this.props.slides.map((slide, i) =&gt; {
            return &lt;Slide slide={slide} key={i} /&gt;;
          })}
        &lt;/IonSlides&gt;
      );
    }
  };
  
  export default Slides;
  </code></pre>