Un botón sobre cada card

En la lección anterior hemos visto cómo podemos comunicar datos desde un componente padre, en este caso "ProductList" hacia un componente hijo, en este caso "ProductCart". Una forma de hacerlo es a través de props. Aquí estamos enviando información a través de este prop llamado "Product". De esta manera, los productos que están definidos dentro de "ProductList" son enviados a este componente "ProductCart" uno a la vez. A través de esta expresión donde "Product" es el prop o propiedad que se está enviando al componente hijo y "P" es el valor que se envía. Entonces, de esta manera nosotros podemos comunicar valores desde un componente padre hacia un componente hijo. Pero no hemos visto cómo hacer lo contrario. En esta lección vamos a ver cómo hacer lo contrario. O sea, que un componente hijo pueda notificar de algo a su componente padre y si lo desea, pueda enviar también información. Para esto vamos a agregar un elemento más dentro de nuestro "ProductCart". Específicamente, vamos a agregar un botón que dirá "agregar al carrito". Tras agregar ello, vemos que para cada producto tenemos un botón "agregar al carrito". Si hacemos click no pasa nada porque no hemos asociado todavía ningún evento de click al botón. Nosotros podemos asociar un evento de click en el botón, por ejemplo, "click=" y vamos a definir un método que en este caso será "addProduct". Para que esto funcione, tenemos que definir un objeto o "methods" en nuestro script y entonces definir el método “addProduct”. Por ahora simplemente vamos a imprimir un mensaje en consola que dirá "agregando producto". Recordamos y en nuestro navegador vamos a abrir la consola presionando F12. Si hago click en este botón, tenemos aquí este mensaje de los, si hago click en este otro también y en este tercero. De igual manera, aquí tenemos el mismo mensaje se ha impreso tres veces. Sin embargo, no estamos identificando que producto se está agregando. Queremos que aquí diga "agregando producto" seguido del id del producto. El producto se recibe a través de props y sabemos que es de tipo product. Entonces para que un producto tenga un id tenemos que declarar ello. Entonces agregamos el id por aquí y tras hacer ello vamos a poder aquí concatenar el id del producto y procedemos a agregar un id para cada uno de nuestros productos. Ya está. Volvemos a nuestro navegador y vamos a agregar el producto 5. Si queremos lo podemos agregar varias veces. Agregamos otro producto y agregamos el otro producto también. De esta manera estamos imprimiendo un mensaje, "agregando producto" cada vez que se hace click en el botón de "agregar al carrito". Esto funciona bien. Sin embargo, esta información se queda dentro del componente "ProductCart". O sea, si yo hago click en este botón, este componente se entera que hice click. Si hago click aquí, este componente se entera de que hice click. Pero en general, el componente padre no se entera de este click y por lo tanto no puede agregar la información al carrito de compras. Veremos en la lección siguiente cómo lograr esta comunicación de un componente hijo a un componente padre.

Crea una cuenta y continúa aprendiendo 🚀

Un botón sobre cada card