Реакция-карусель-слайдер не воспроизводится

Question

ребята! Возникла проблема с перерисовкой компонента слайдера. После выбора другой опции SELECT, другие изображения должны быть загружены в карусельный компонент. Но!! Ничего не произошло! Изменяются реквизиты компонента, а инструменты разработчика показывают слайды (изображения), но в DOM ничего не происходит.

Ниже я отправляю код. Как вы думаете? Где проблема?

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

В вашем Sample Component вы возвращаете объект внутри React.Fragment. Это как-то связано с этим? Что если вы удалите {и} внутри и попытаетесь? Как ниже. Не знаю, в этом ли проблема, но попробуйте. У вас также есть дополнительный DIV в методе карты для слайдов. Если вы посмотрите инструкции для React Carousel Slider, они не будут использовать эти дополнительные DIV и {}

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