Map is not a function in arrays inside Objects React

Question

Im getting Map is not a function in arrays inside Objects in React,

Here is my code:

export const detailProduct = [

    {
        sku: "price_1HCCiwLjQjzuYZ7H4KhpEqLX",
        title: "Tibetan Singing Bowl Set",
        price: 29.99,
        info: "Tibetan Singing Bowl Set Meditation Bowl",
        madeInfo: "3.2 Handmade Meditation Bowl x 1, Hand- sewn Silk Cushion x 1, Mallet covered with leather x 1, creamy white storage bag x 1.A full set of Tibetan Meditation Yoga Singing Bowl with decent price. Our singing bowl can fit in your hand, portable and perfect for on - the - go requirements. CRAFTSMANSHIP - Hand hammered by the craftsmen specializing in Meditation Yoga Singing Bowls.Well - carved symbols and vivid patterns revealed the wholehearted process.Specially hand - sewn silk cushion highlighted the quality of the singing bowl set.",
        typeInfo: "PREMIUM QUALITY - Adopting traditional Nepalese craft, made up of seven metals including gold, silver, mercury, copper, iron, tin and lead.",
        moreInfo: "EASY TO USE - You can gently tap the mallet to the outside and inside edges of the meditation bowl or play it around the rim to produce the resonant sounds and deep vibrations that can relax your mind and release stress. WIDE APPLICATIONS - Great choice for yoga meditation, sound therapy, spiritual gatherings and stress relief. Ideal for healing from stress disorders, pain, depression and excessive lust. Perfect gifts for your friends, families and sweetheart.",
        inCart: false,
        images: [

            {
                url: "/singingbowl2999/1.png"
            },
            {
                url: "/singingbowl2999/2.png"
            }

        ]



    }

]

I am having trouble looping over Images array. I get map is not a function. Please help

@Hilea I am trying to render images arrays in a functional component using ContextApi. — The Ultimate Wanderer
– The Ultimate Wanderer, Commented Aug 20, 2020 at 9:38
@AwaisRafiqChaudhry I am looping over detailProduct correctly but when I loop again the second time in images I am getting the error. — The Ultimate Wanderer
– The Ultimate Wanderer, Commented Aug 20, 2020 at 9:39

Akshay Kumar · Accepted Answer · 2020-08-20 09:33:23Z

2

try doing

detailProduct[0].images.map(image => { 
  // do what you want in here.
})

My best guess is that you forgot to specify the index in the detailProduct array. The images you want to access are a part of the object which is at index 0 in the detailProduct array.

answered Aug 20, 2020 at 9:33

Akshay Kumar

1,0351 gold badge17 silver badges33 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Awais Rafiq Chaudhry · Accepted Answer · 2020-08-20 09:39:54Z

1

Try the following:

detailProduct[0].images.map((image, index) => { 
  <img key={index} src={require(image.url)} />
})

answered Aug 20, 2020 at 9:39

Awais Rafiq Chaudhry

4903 silver badges10 bronze badges

Comments

The Ultimate Wanderer · Accepted Answer · 2020-08-20 09:59:50Z

-1

thank you all I got it. I was doing some tutorial and wanted add extra images. I got it.

answered Aug 20, 2020 at 9:59

The Ultimate Wanderer

276 bronze badges

Collectives™ on Stack Overflow

Map is not a function in arrays inside Objects React

3 Answers 3

Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related