Onclick handler not working on multiple image carousel

Question

Multiple image carousel is working pretty fine, but I would like to add onClick event handler to every image in the carousel and render it at the top of carousel and its working for only the 1st element of every slide and not on remaining elements in the active slide.

I had implemented it by customizing the multiple image carousel, Check out the code below.

interface imgprops {
    AdListItem: any;
}
class Imageslide extends Component<imgprops, any> {

    constructor(props: any) {
        super(props);
        this.state = { imgsrc: this.props.AdListItem[0].src };

    }
    componentDidMount() {

        $('.multi-item-carousel .item').each(function(){
            var next = $(this).next();
            if (!next.length) {
                next = $(this).siblings(':first');
            }
            next.children(':first-child').clone().appendTo($(this));

            for (var i=0;i<2;i++) {
                next=next.next();
                if (!next.length) {
                    next = $(this).siblings(':first');
                }

            next.children(':first-child').clone().appendTo($(this));
            }
        });
    }

    public DisplayImage(details: any) {
        debugger;
        this.setState(
            this.state = { imgsrc: details.src }
        );
        console.log(this.state);
    }
    render() {
        debugger;

        return (
            <div className="ms-Grid-row">
                <div className="card">
                    <div className='ProdImgView'>
                        <img src={this.state.imgsrc} alt="avengers" className='prodimg' />

                        <div className="prodprize">
                            <p className="card-prize"><i className="fas fa-rupee-sign"></i>{this.props.AdListItem.prize}</p>
                        </div>
                    </div>
                </div>
                <div className="ms-Grid-col ms-sm6 ms-md4 ms-lg12 ImageslideMainDiv">
                    <div className="carousel slide multi-item-carousel" id="theCarousel">
                        <div className="carousel-inner">
                            <div className="item active">
                                <div className="ms-Grid-col ms-sm3"><img src={this.props.AdListItem[0].src} className="img-responsive" onClick={() => { debugger; this.DisplayImage(this.props.AdListItem[0]) }} /></div>
                            </div>
                            {this.props.AdListItem.map((items: any) =>
                                <div className="item">
                                    <div className="ms-Grid-col ms-sm3"><img src={items.src} className="img-responsive" onClick={() => { debugger; this.DisplayImage(items) }} /></div>
                                </div>
                            )}

                        </div>
                        <a href="#theCarousel" className="left carousel-control left" data-slide="prev">
                            <i className="fas fa-chevron-left ChevronIcon"></i>
                        </a>
                        <a href="#theCarousel" className="right carousel-control right" data-slide="next">
                            <i className="fas fa-chevron-right ChevronIcon"></i>
                        </a>
                    </div>
                </div>
            </div>
        );

    }
}

function mapStateToProps(state: any) {
    return {
        AdListItem: state.AdList
    };
}

export default connect(mapStateToProps, undefined)(Imageslide);

I want to render every element that is clicked to the top of carousel. but only the every 1st element of the carousel is working the correct way, can someone figure it out for me.

Answer 1

You have to bind your function to the component then the issue will be resolved.

Add the following line to the constructor,

constructor(props: any) {
        super(props);
        this.state = { imgsrc: this.props.AdListItem[0].src };

        // New line
        this.DisplayImage = this.DisplayImage.bind(this);
    }