Tengo una serie de objetos que contienen detalles de productos. En el objeto, hay una matriz de imágenes de propiedad de objetos donde están todas las imágenes con id. Estoy tratando de representar solo la primera imagen de esa matriz de objetos. Intenté establecer 0 índices para representar solo el primer objeto, pero recibí un error.
Mi base de datos:
[ { _id: "asdasdds", title: "Title", reg_price: string images: [ { id: "a1e73da66ddb9191984e3128b0df78af" src: "https://res.cloudinary.com/df8velsbs/image/upload/v1645508032/uts3xxi6wbckrjzjsrgx.png" }, { id: "a1e73da66ddb9191984e3128b0df78af" src: "https://res.cloudinary.com/df8velsbs/image/upload/v1645508032/uts3xxi6wbckrjzjsrgx.png" }, ] }, { _id: "asdasdds", title: "Title", reg_price: string images: [ { id: "a1e73da66ddb9191984e3128b0df78af" src: "https://res.cloudinary.com/df8velsbs/image/upload/v1645508032/uts3xxi6wbckrjzjsrgx.png" }, { id: "a1e73da66ddb9191984e3128b0df78af" src: "https://res.cloudinary.com/df8velsbs/image/upload/v1645508032/uts3xxi6wbckrjzjsrgx.png" }, { id: "a1e73da66ddb9191984e3128b0df78af" src: "https://res.cloudinary.com/df8velsbs/image/upload/v1645508032/uts3xxi6wbckrjzjsrgx.png" }, ] } ] Aquí está mi código: cuando configuré 0 index product.images[0] obtuve el error de que el mapa no existe.
{ products.map(product => { return <tr> <td className="px-5 py-5 border-b border-gray-200 bg-white text-sm"> <div className="flex items-center"> <div className="flex-shrink-0 w-10 h-10"> { product.images[0].map(({ src }) => <img className="w-full h-full rounded-full" src={src} alt="" />) } </div> </div>No necesitas mapear en absoluto. Simplemente consulte directamente la propiedad src del elemento indexado 0
{products.map(product => ( <tr> <td className="px-5 py-5 border-b border-gray-200 bg-white text-sm"> <div className="flex items-center"> <div className="flex-shrink-0 w-10 h-10"> <img alt="" className="w-full h-full rounded-full" src={product.images[0]?.src ?? "some-placeholder.png"} /> </div> </div> </td> </tr> )}