Update to children elements (slides) are not rendered

[taijuten]

Describe the bug If a child element is updated (in this case, a className) this is not re-rendered.

To Reproduce Steps to reproduce the behavior:

• Go to Live JSX editing on demo page (e.g. https://brainhubeu.github.io/react-carousel/docs/examples/multipleSlides)
• Paste in the following

// import Carousel from '@brainhubeu/react-carousel';
// import '@brainhubeu/react-carousel/lib/style.css';

class MyCarousel extends React.Component {
  constructor() {
    super()
    this.state = { selected: null };
  }

  render() {
    return (
    <div>
      <Carousel
        plugins={[    'infinite',
          'arrows',
          {
             resolve: slidesToShowPlugin,
             options: {
               numberOfSlides: 2
             }
           },
        ]}
        slides={[
          (<img onClick={() => this.setState({ selected: 0 })} src={imageOne} className={!this.state.selected ? 'active' : ''} />),
          (<img onClick={() => this.setState({ selected: 1 })} src={imageTwo} className={this.state.selected === 1 ? 'active' : ''} />),
          (<img onClick={() => this.setState({ selected: 2 })} src={imageThree} className={this.state.selected === 2 ? 'active' : ''} />),
        ]}
      />
    </div>
    );
  }
}

Expected behavior On click of each image, it should apply an active class. This is not the case. According to React debug this is passing correct props, but not being rerendered.

[HabibaGadalla]

i'm having the same issue

[AlexKvazos]

The carousel seems to internally manipulate the dom without React so anytime you re-render it it will clear the dom manipulations and render blank. Seems like this is not possible to fix with the current architecture. Having the same issue and gave up in favor of https://www.npmjs.com/package/pure-react-carousel