Components inside carousel don't re-render on prop change

class MyCarousel extends React.Component {
  constructor() {
    super()
    this.state = { value: 1 };
    this.onChange = this.onChange.bind(this);
  }

  onChange(value) {
    this.setState({ value });
  }

  render() {
  const X = (props) => { 
    console.log('render')
    return <div>{props.value}</div>
  }
    return (
    <div>
      <input
        type="number"
        value={this.state.value}
        onChange={e => this.onChange(e.target.value)}
      />
      <Carousel
        onChange={this.onChange}
        slides={[
          (<X value={this.state.value}/>),
          (<img src={imageTwo} />),
          (<img src={imageThree} />),
        ]}
        plugins={[
          'arrows',
          'clickToChange'
        ]}
      />
    </div>
    );
  }
}

When the value in state changes for the parent component it should also show in X component.

The fix that I feel should be added, https://github.com/brainhubeu/react-carousel/blob/cca4f55faa8cab3d4f7d258580b771ecb6b794b3/react-carousel/src/components/Carousel.js#L151

We can just change this to, useEffect(() => { setSlides(children); }, [children]);

Whenever children change the slides are updated now, care needs to be made to provide a named array to slides now to prevent unnecessary re-renders.

brainhubeu / react-carousel

Components inside carousel don't re-render on prop change #645