Show the Redux state React

Question

I don't know why my console.log(el) display elements of filters object like array - just names as string type.

mapReducer.js

const initState = {
    filters: {
        basen: {
            active: true,
            name: 'BASEN'
        },
        koszykowka: {
            active: true,
            name: 'KOSZYKÓWKA'
        },
        pilka_nozna: {
            active: true,
            name: 'PIŁKA NOŻNA'
        },
        pilka_reczna: {
            active: true,
            name: 'PIŁKA RĘCZNA'
        },
        siatkowka: {
            active: true,
            name: 'SIATKÓWKA'
        },
        tenis: {
            active: true,
            name: 'TENIS'
        }
    }
}

objectFilters.js

{Object.keys(this.props.filters).map((el, i) => {
                console.log(el)
                return(
                    <ObjectFiltersElement 
                        key={i} 
                        name={el.name} 
                        active={el.active} 
                        changeFilterHandler={(el) => (this.changeFilterHandler(el))}
                        />
                )
            })}

objectFiltersElement.js

<div className={elementStyle} onClick={() => props.changeFilterHandler(props.name)}>
    {props.name}
</div>

And console.log(el) give me this:

Elements of filters not as objects but as strings.

When I am tring get to active or name of object I got undefinded.

    console.log("THIS.PROPS.FILTERS", this.props.filters)

Answer 1

You are running .map on Object.keys(this.props.filters) which is an Array of object key names like - ['basen', 'koszykowka', 'pilka_nozna' ....].

In your console.log(el) you can see its basen (lowercase). You need to modify the data to consume it in you .map() method. That is the reason you are getting undefined when trying to get access to active or name.

I think this code will work for you -

Object.keys(this.props.filters).map(x => this.props.filters[x]).map((el, i) => {...}

Example Code For creating an Array from Object -

var filter = {
        basen: {
            active: true,
            name: 'BASEN'
        },
        koszykowka: {
            active: true,
            name: 'KOSZYKÓWKA'
        },
        pilka_nozna: {
            active: true,
            name: 'PIŁKA NOŻNA'
        },
        pilka_reczna: {
            active: true,
            name: 'PIŁKA RĘCZNA'
        },
        siatkowka: {
            active: true,
            name: 'SIATKÓWKA'
        },
        tenis: {
            active: true,
            name: 'TENIS'
        }
    };


var newFilter = Object.keys(filter).map(x => filter[x])

console.log(newFilter)

Second Approach -

const { filters } = this.props;
{Object.keys(filters).map((el, i) => {
                console.log(el)
                return(
                    <ObjectFiltersElement 
                        key={i} 
                        name={filters[el].name} 
                        active={filters[el].active} 
                        changeFilterHandler={(el) => (this.changeFilterHandler(el))}
                        />
                )
            })}