CODEWITHSUNDEEP
javascriptreactjscarousel
eibersji
eibersji

Reputation: 1216

Reactjs: Why is the Carousel not showing at all?

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}
        />
    )
}

Upvotes: 0

Views: 87

Answers (2)

Henry Woody
Henry Woody

Reputation: 15662

The issue is that the first map inside galleryItems does not return anything, so galleryItems just returns an empty array. Thus nothing is rendered, but also no errors.

You can update it like this:

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)
            return checkImage.map((image, i) => (
                <div key={`key-${i}`}  className="card-img-top"><img src={image.url} /></div>
            ));
        })
    )
};

Upvotes: 1

n1stre
n1stre

Reputation: 6086

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>
            ));
        })
    )
};

Upvotes: 1

Related Questions