react-carousel-slider doesn't rerender

Question

guys! Have a problem with rerendering of slider component. After choosing another SELECT option, other images are to be loaded to carousel component. But!! Nothing happens! Props of component are being changed, and developer tools show slides (images) are changed, but nothing happens on DOM.

Below i post code. What do you think? Where is the problem?

 import React from 'react'; import CarouselSlider from "react-carousel-slider"; import { FormControl } from 'react-bootstrap'; class StampChoose extends React.Component { changeSamplesType = (e) => { const sampleType = e.target.value; this.props.changeSamplesType(sampleType); this.forceUpdate(); } render() { let btnWrapperStyle = { position: "relative", borderRadius: "50%", height: "50px", width: "50px", textAlign: "center" } let btnStyle = { display: "inline-block", position: "relative", top: "90%", transform: "translateY(-50%)", fontSize: "36px" } let rBtnCpnt = (<div style = {btnWrapperStyle} > <div style = {btnStyle} className = "material-icons" > <i className="fas fa-angle-right"></i> </div> </div>); let lBtnCpnt = (<div style = {btnWrapperStyle} > <div style = {btnStyle} className = "material-icons" > <i className="fas fa-angle-left"></i> </div> </div>); let iconItemsStyle = { padding: "0px", background: "transparent", margin:"0 5px", height: "80%" }; const titles = this.props.titles; const slides = this.props.slides; return ( <React.Fragment> <FormControl componentClass="select" onChange={ this.changeSamplesType }> <option value="type1">{ titles['type1'] }</option> <option value="type2">{ titles['type2'] }</option> <option value="type3">{ titles['type3'] }</option> <option value="type4">{ titles['type4'] }</option> </FormControl> <CarouselSlider sliderBoxStyle = {{height: "150px", width: "90%", background: "transparent", overflow: "hidden"}} accEle = {{dots: false}} newState={ this.state } slideCpnts = {slides} itemsStyle = {iconItemsStyle} buttonSetting = {{placeOn: 'middle-outside'}} rBtnCpnt = {rBtnCpnt} lBtnCpnt = {lBtnCpnt} /> </React.Fragment> ) } } export default StampChoose; 

 import React from 'react'; import { Grid, Row, Col, ControlLabel } from 'react-bootstrap'; import { samples, titles} from '../../../samples-stamps'; import StampChoose from './StampChoose'; const Sample = (props) => ( <React.Fragment> { <div> <img src={ `images/samples/${props.img}` } alt={ props.title } /> </div> } </React.Fragment> ); class StampsSamples extends React.Component { state = { sampleType: 'type1' } changeSamplesType = (sampleType) => { this.setState({ sampleType }); } render() { const sampleType = this.state.sampleType; let slides = Object.keys(samples[sampleType]).map((item, i) => { return ( <div> <Sample key={i} title={ samples[sampleType][item].title } img={ samples[sampleType][item].img } productId={ samples[sampleType][item].id } /> </div> ); }); return ( <Grid> <Row> <Col md={ 4 }> <ControlLabel>Примерный образец оттиска <br/> <small>(выберите образец оттиска)</small> </ControlLabel> </Col> <Col md={ 8 }> <StampChoose slides={ slides } titles={ titles } changeSamplesType={ this.changeSamplesType } /> </Col> </Row> </Grid> ); } } export default StampsSamples; 

Answer 1

In your Sample Component your returning an object inside of React.Fragment. Does it have anything to do with that? What if you remove the { and } inside there and try? Like below. Don't know if thats the issue but try. You also have an extra DIV in your map method for the slides. If you check the instructions for the React Carousel Slider they dont use these extra DIVs and {}

 <React.Fragment>
   <div>
     <img src={ `images/samples/${props.img}` } alt={ props.title } />
   </div>   
 </React.Fragment>