Can't get values from Array object to render React component

I’m struggling with my student project where I need to render my shopping list with art categories. There are many items with different values.

const [shopList, setShopList] = useState(
    [{
        PORTRET: [{
            img: "img/portret_2.jpg",
            dimention: "40x80",
            price: "170",
            category: "PORTRET",
            id: 1
        },
        {
            img: "img/portret_1.jpg",
            dimention: "80x100",
            price: "190",
            category: "PORTRET",
            id: 2
        },
        {
            img: "img/portret_3.jpg",
            dimention: "80x120",
            price: "220",
            category: "PORTRET",
            id: 3
        }]
    },
    {
        SQUARE: [{
            img: "img/square_1.jpg",
            dimention: "40x80",
            price: "180",
            category: "SQUARE",
            id: 4
        },
        {
            img: "img/square_5.jpg",
            dimention: "40x80",
            price: "180",
            category: "SQUARE",
            id: 5
        },
        {
            img: "img/square_3.jpg",
            dimention: "40x80",
            price: "180",
            category: "SQUARE",
            id: 6
        },
        {
            img: "img/square_2.jpg",
            dimention: "40x80",
            price: "180",
            category: "SQUARE",
            id: 7
        },
        {
            img: "img/square_4.jpg",
            dimention: "40x80",
            price: "180",
            category: "SQUARE",
            id: 8
        }]
    },
    {
        LANDSCAPE: [{
            img: "img/landscape_1.jpg",
            dimention: "75x110",
            price: "220",
            category: "LANDSCAPE",
            id: 9
        }]
    },
    {
        CLOCK: [{
            img: "img/circle_1.jpg",
            dimention: "⌀32",
            price: "170",
            category: "CLOCK",
            id: 10
        },
        {
            img: "img/circle_2.jpg",
            dimention: "⌀32",
            price: "170",
            category: "CLOCK",
            id: 11
        }]
    },
    {
        OTHER: [{
            img: "img/other_1.jpg",
            dimention: "-",
            price: "250",
            category: "OTHER",
            id: 12
        },
        {
            img: "img/other_2.jpg",
            dimention: "-",
            price: "250",
            category: "OTHER",
            id: 13
        },
        {
            img: "img/horse.jpg",
            dimention: "-",
            price: "250",
            category: "OTHER",
            id: 14
        },
        {
            img: "img/tattoo.jpg",
            dimention: "-",
            price: "250",
            category: "OTHER",
            id: 15
        }]
    }
    ]
);

I made a react component where rendered items category and inside of it must give me a list of available arts.

const ShopList = ({ shopList }) => {
return (
    <div className="Section">
        {shopList.map((cat) => {
            return (Object.keys(cat).map((item) => {
                return (<div>
                    {console.log(item)}
                    <h3>{item.category}</h3>
                    <div className="bg-line"></div>
                    <div className="List-section" >
                        <div className="card" key={item.id}>
                            <div>
                                <img src={item.img} alt="" />
                                <div className="card-body">
                                    <h4 className="card-text">{item.dimention}cm</h4>
                                    <button type="button" name="button">{item.price}€</button>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>)
            }
            ))
        })
        }
    </div>
)

I’ve tried simply gets these values:

console.log(Object.getOwnPropertyNames(shopList));
console.log(Object.keys(shopList));
console.log(shopList[0]);
console.log(Object.values(shopList));

Couple days I’ve searching a solution of my problem. And using this line of code looks like the right way to make it works.

{shopList.map((cat) => {
            return (Object.keys(cat).map((item) => {
                return ( //render a values )}

I think my problem is inside of map function but I don’t know how to get nested objects and render there values.

191 thoughts on “Can't get values from Array object to render React component”

  1. Hey I am so thrilled I found your web site, I really found you by accident, while I was researching on Google for something else, Nonetheless I
    am here now and would just like to say cheers for a fantastic post and a all round enjoyable blog (I also love the
    theme/design), I don’t have time to look over it all at the moment but I have book-marked it and also included
    your RSS feeds, so when I have time I will be back to read a lot more, Please do keep
    up the excellent job. http://www.deinformedvoters.org/tadalafil-price

    Reply

Leave a Comment