I’m working on a React application where I have a JSON array containing image URLs. I want to display these images dynamically using the map function (like in the image shows). any idea how to do that
This is my json code I want to render dyanamically render first image in the array
`{displayedItems.map((item, index) => (
<code> <div key={index}>
<img
src={item.image[0]}
alt=""
className=" rounded-md cursor-pointer transition-transform duration-300 ease-in-out transform hover:scale-[1.02] object-cover"
/>
</div>
))}
</code>
<code> <div key={index}>
<img
src={item.image[0]}
alt=""
className=" rounded-md cursor-pointer transition-transform duration-300 ease-in-out transform hover:scale-[1.02] object-cover"
/>
</div>
))}
</code>
<div key={index}>
<img
src={item.image[0]}
alt=""
className=" rounded-md cursor-pointer transition-transform duration-300 ease-in-out transform hover:scale-[1.02] object-cover"
/>
</div>
))}
`
1