CODEWITHSUNDEEP
reactjs
eibersji
eibersji

Reputation: 1216

ReactJS: filter images to map into carousel

This is my BrandsCarousel.js

import React, {Component} from 'react'
import _ from 'lodash'
import {connect} from 'react-redux'
import AliceCarousel from 'react-alice-carousel';

import { getSellerBrands } from '../../actions'

class BrandsCarousel extends Component{
    state = {
        brands: []
    }

    componentWillReceiveProps = (nextProps) => {
        if(nextProps.sellerBrands !== this.props.sellerBrands){
            var filterBrands = !_.isEmpty(nextProps.sellerBrands.data)
                                    ? nextProps.sellerBrands.data.data.filter((item) => {
                                        return item.type === "brand"
                                    })
                                    : []

            console.log("filterBrands", filterBrands)

            this.setState({
                brands: filterBrands
            })
        }
    }

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

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

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


        )
    }
}

const mapStateToProps = state => {
    return {
        // brandList: state.brandList,
        sellerBrands: state.sellerBrands
    }
}

export default connect(mapStateToProps, { getSellerBrands })(BrandsCarousel)

now, filterBrands, returns this: enter image description here

but henhen does not return anything but it should return something because the response got 2 images with the collection_name = "images" yet I get nothing. why is that? I want to display all images in the carousel. what am I doing wrong here? I am new to ReactJS so please be specific and thanks in advance

Upvotes: 0

Views: 1142

Answers (1)

O. Paquay
O. Paquay

Reputation: 276

I think this line is not correct :

var checkImage = this.state.brands.length === 0 ? [] : this.state.brands.filter((item) => item.collection_name === "images")

In your filter condition you are checking if item.collection_name === "images", but your item contains a media array which contains many items. I think you should instead do this:

this.state.brands.map((brand, i) => {
  var checkImage = brand.media.length === 0 ? [] : brand.media.filter((media) => media.collection_name === "images");
  checkImage.map((image, i) => (
      ...
  ));
})

Upvotes: 2

Related Questions