0

Estoy intentando hacer una página de compras. Cuando intento enviar cada artículo al carrito le quiero asignar una ID única a cada operación (para que después sea más fácil quitar cada producto si el usuario lo quiere).
Este es el código que tengo hasta ahora pero no consigo meter la ID de cada uno:

function mandarAlCarro(item) {
    const { nombre, precio, imagen} = item
    setCarrito(prev => {
        return [...prev, {
            nombre: nombre,
            precio: precio,
            imagen: imagen,
        }]
    })
    console.log(item)
}

Intenté agregar el parametro {id} a la desestructuración del ítem pero no me lo toma. ¿Cómo podría conseguir esto?

Edito: Agrego el codigo que estoy usando para renderizar cada elemento en la pantalla:

       const tarjetas = productos.map(item => {
        return (
            <Tarjeta
                nombre={item.nombre}
                imagen={item.imagen}
                precio={item.precio}
                aptoCeliaco={item.aptoCeliaco}
                categoria={item.categoria}
                handleClickSuma={() => mandarAlCarro(item)}
                handleClickResta={() => quitarDelCarro(item)}
            />
        )
    })

La funcion mandarAlCarro(item) es la que estaba mas arriba. Todo esto se pasa como props al carrito y desde ahi se renderiza


<Carrito carrito={carrito} />

4
  • El problema con el id no está en donde se crean los datos o se asignan. Si no en donde renderizas hijos de manera sistemática. Con ver tú código supongo que en un momento haces un for sobre carrito para renderizar elementos con los datos de nombre, precio e imagen. Ahí en ese ciclo for es donde deberías de pasar el prop de id. Si incluyes ese código en tu pregunta podría ayudarte 😊.
    – FranAcuna
    Commented el 24 ene. 2022 a las 17:57
  • Gracias por responder, ahi edite mi codigo y agregue la const tarjetas que es la que renderiza todos los elementos en la pagina principal de la tienda. Al hacer click en el boton + de cada elemento se manda al carrito como props, ahi es donde se renderizan los elementos que voy sumando al carrito.
    – pilki
    Commented el 24 ene. 2022 a las 18:16
  • Me confundí con lo que estabas solicitando y confundí temas. Creí que esto era un problema relacionado al prop de key de React. La información adicional del renderizado no es relevante, disculpas.
    – FranAcuna
    Commented el 24 ene. 2022 a las 18:56
  • Entonces, una vez que el usuario hace el carrito/operación ¿Usas un nuevo componente para mostrar la misma como mencionas, y ahi dejar que el usuario modifique el pedido? Saludos
    – g.4
    Commented el 25 ene. 2022 a las 5:45

2 respuestas 2

1

Si al intentar hacer la destructuracion con la prop {id} no obtiene el dato ya que el item no posee esa propiedad por defecto, se puede definir mediante el index que te provee la funcion .map de JavaScript o bien utilizando alguna librería como react-id-generator que genera ids unicas

Primeramente se agrega la propiedad id al item definiendole un valor (en este caso el index)

const tarjetas = productos.map((item, index) => {
    item.id = index;
    return (
         <Tarjeta
            nombre={item.nombre}
            imagen={item.imagen}
            precio={item.precio}
            aptoCeliaco={item.aptoCeliaco}
            categoria={item.categoria}
            handleClickSuma={() => mandarAlCarro(item)}
              handleClickResta={() => quitarDelCarro(item)}
            />
        )
})

De esa forma vas a poder desctructurar esa propiedad, haciendo uso del index que brinda el map o con alguna librería

function mandarAlCarro(item) {
    const { nombre, precio, imagen, id} = item
    setCarrito(prev => {
        return [...prev, {
            id,
            nombre,
            precio,
            imagen,
        }]
    })
    console.log(item)
}

0

Podrías crear tu propio código único a partir del índice del elemento, su nombre y categoría. Por ejemplo:

const tarjetas = productos.map((item,index)=> {
        return (
            <Tarjeta
                id={`${item.nombre}-${index}-${item.categoria}`}
                nombre={item.nombre}
                imagen={item.imagen}
                precio={item.precio}
                aptoCeliaco={item.aptoCeliaco}
                categoria={item.categoria}
                handleClickSuma={() => mandarAlCarro(item)}
                handleClickResta={() => quitarDelCarro(item)}
            />
        )
    })

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.