Closed ishan28mkip closed 4 years ago
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]);
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.
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.