Mostrar info de producto al hacer clic

Mostrar el detalle de un producto al hacer clic en una card es uno de los retos más comunes cuando trabajas con React Context en un e-commerce. Aquí aprendes a conectar el clic de la card con un estado global y a renderizar la información en el componente Product Detail, paso a paso.

¿Cómo crear el estado para guardar el producto seleccionado?

La idea es que cada clic sobre una card envíe la información de ese producto al contexto, y que Product Detail la lea desde ahí.

Dentro del provider conviene ordenar los estados con comentarios para que se entiendan a simple vista: uno para el Product Detail (open/close), otro para el shopping cart y, ahora, uno nuevo llamado productToShow. Este estado se inicializa como un objeto vacío, porque la API devuelve cada producto en forma de objeto dentro de un array.

¿Por qué inicializar el estado como un objeto vacío? Porque la información de cada card llega como objeto desde la API. Empezar vacío evita errores al renderizar antes del primer clic.

Una vez creado, exporta productToShow y setProductToShow desde el provider para que cualquier componente pueda leer o actualizar ese valor.

¿Cómo enviar la información de la card al contexto al hacer clic?

El clic debe disparar dos acciones a la vez: abrir el Product Detail y guardar el producto seleccionado. Para eso se crea una función dentro del componente Card llamada showProduct.

Esta función recibe como parámetro la data del producto y ejecuta:

• context.openProductDetail() para mostrar el panel lateral.
• context.setProductToShow(productDetail) para guardar la información en el estado global.

En el onClick de la card se llama showProduct(data.data), pasando el objeto del producto cliqueado. Así, cuando el usuario hace clic, el contexto se actualiza con el id, title, price, description e images correspondientes.

Para verificar que funciona, un console.log(context.productToShow) dentro de Product Detail muestra el objeto exacto que llega: por ejemplo, id: 1 con título modificado y precio 4.91, o id: 4 con Practical Soft Table y precio 7.97.

¿Cómo renderizar la imagen, el precio, el título y la descripción?

Dentro del aside de Product Detail se construye la estructura visual debajo de la cabecera. Usa una etiqueta figure con una img adentro, y un p con varios span para el texto.

En la imagen, el src recibe context.productToShow.images[0] para asegurar que siempre se muestre la primera imagen del array, evitando que aparezca cualquiera al azar. El alt toma context.productToShow.title como texto alternativo.

La imagen lleva clases utilitarias de Tailwind:

• w-full y h-full para que ocupe todo el contenedor.
• rounded-lg para mantener la coherencia visual con el resto del diseño.

Después viene el bloque de texto con esta jerarquía:

1. Precio: font-medium y text-2xl para que sea el elemento más llamativo.
2. Título: font-medium con text-md para un peso medio.
3. Descripción: font-light con text-sm para que se lea como apoyo.

El figure recibe px-6 para dar aire lateral, y el párrafo usa flex flex-col p-6 para apilar los textos uno debajo del otro con padding interno. Un mb-2 en el precio agrega respiro entre líneas.

¿Qué hace images[0] en el src de la imagen? Selecciona la primera imagen del array que devuelve la API. Sin el índice, React no sabría cuál mostrar y podría tomar cualquiera.

¿Cómo cerrar el Product Detail al hacer clic en la X?

Este era el reto de la clase anterior y se resuelve con una sola línea de lógica. En el ícono de cerrar, agrega un onClick que ejecute context.closeProductDetail().

Esa función ya estaba exportada desde el provider, así que solo hay que invocarla desde el contexto. Para mejorar la experiencia de usuario, añade la clase cursor-pointer a la X, de modo que el cursor cambie a una manita y comunique que el elemento es interactivo.

¿Qué diferencia hay entre openProductDetail y setProductToShow? La primera controla la visibilidad del panel (booleano open/close). La segunda guarda el objeto del producto que se debe renderizar dentro de ese panel.

Habilidades y conceptos clave que practicas en esta clase

Más allá del resultado visual, aquí entrenas varias habilidades de React que se repiten en cualquier proyecto real.

• Manejo de estado global con Context API [01:30]: creas productToShow y su setter para compartir información entre Card y Product Detail sin prop drilling.
• Funciones que ejecutan múltiples acciones [03:45]: showProduct abre el panel y actualiza el estado en una sola llamada, un patrón común para handlers de UI.
• Renderizado condicional desde contexto [05:50]: Product Detail lee context.productToShow y pinta la imagen, precio, título y descripción del producto cliqueado.
• Acceso por índice en arrays [07:40]: usar images[0] garantiza que se muestre siempre la primera imagen y evita renders inconsistentes.
• Estilos utilitarios con Tailwind [08:20]: clases como flex flex-col, px-6, font-medium, text-2xl, text-sm y rounded-lg construyen la jerarquía visual sin CSS adicional.
• UX con cursor-pointer [10:30]: un detalle pequeño que comunica claramente qué elementos son cliqueables.

Cuéntame en los comentarios cómo te quedó tu Product Detail y qué información decidiste mostrar de cada card.