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

Answer 1

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.

Answer 2

Try the following:

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

Answer 3

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