Ad

Reactjs: Why Is The Carousel Not Showing At All?

- 1 answer

Ok so, I have this carousel. I am using AliceCarousel and I think that the logic is right because it filters just the ones with the collection_name === "images"enter image description here

but it doesn't seem to be getting rendered. I am not receiving any errors so why? this is the JSON structure, enter image description here in case that I have forgotten something. I am trying to get all the image URLs and make it into a carousel. please help me, I am new to Reactjs.

galleryItems() {
    return (
        this.state.brands.map((brand, i) => {
            var checkImage = brand.media.length === 0 ? [] : brand.media.filter((media) => media.collection_name === "images");
            console.log('henlos',checkImage)
            checkImage.map((image, i) => (
                <div key={`key-${i}`}  className="card-img-top"><img src={image.url} /></div>
            ));
        })
    )
};

render(){
    const items = this.galleryItems();
    const responsive = {
        0: { items: 2 },
        600: { items: 2 },
        1024: { items: 2 }
    };

    return (
        <AliceCarousel 
            items = {items}
            mouseDragEnabled 
            responsive={responsive}
            buttonsDisabled={true}
            dotsDisabled={true}
        />
    )
}
Ad

Answer

You've forgot to return checkImage.map from galleryItems:

galleryItems() {
    return (
        this.state.brands.map((brand, i) => {
            // ...
            return checkImage.map((image, i) => ( 
                <div key={`key-${i}`} className="card-img-top">...</div>
            ));
        })
    )
};
Ad
source: stackoverflow.com
Ad