¡Suscríbete y continúa aprendiendo!

Esta lección está disponible únicamente para suscriptores.

Regístrate o inicia sesión para continuar aprendiendo:

Frontend Aprendiz

Un botón sobre cada card

Breve repaso sobre Props. Luego agregamos un botón sobre cada ProductCard, de modo que posteriormente permita agregar cada producto al carrito de compras.

Esta lección no cuenta con recursos adicionales.

Si crees que hace falta algo, o necesitas ayuda, puedes publicar una pregunta en el foro.

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.

¿Tienes dudas?

Publicar pregunta

¡Comparte conocimiento!

Volver al índice

Regístrate

Inicia sesión para llevar un control de tu progreso.

Capítulos




































36

Un botón sobre cada card
























































































Espera un momento ...

¿Te gustaría llevar mi curso de Laravel, gratis?

Sólo debes ingresar tus datos: