Visualizar los productos agregados al carrito requiere un componente reutilizable que muestre imagen, título, precio y un ícono para eliminar. Aquí aprendes a construir un OrderCard en React, conectarlo con el contexto global y renderizarlo dentro del CheckoutSideMenu usando Tailwind CSS.

Cómo estructuro el componente OrderCard en React

La base de toda card en React parte de un archivo index.jsx dentro de su propia carpeta. Esa convención mantiene los componentes aislados y fáciles de importar.

Dentro de components/OrderCard/index.jsx declaras una constante con el nombre del componente y exportas con export default. El cuerpo retorna un div envolvente que organiza dos grupos visuales: a la izquierda la imagen junto al título, y a la derecha el precio con el ícono de cierre.

Para lograr ese acomodo usas tres clases de Tailwind: flex para alinear elementos en fila, justify-between para empujar cada grupo a un extremo, e items-center para centrarlos verticalmente. Esta combinación es el patrón más usado para cards horizontales.

¿Qué hace justify-between en Tailwind? Distribuye los elementos hijos hacia los extremos del contenedor, dejando el espacio sobrante entre ellos. Es ideal cuando quieres alinear info principal a la izquierda y acciones a la derecha.

Cómo defino los estilos de imagen y texto

La imagen vive dentro de un figure con un tamaño fijo de w-20 h-20. La etiqueta img usa w-full h-full para ocupar todo el espacio del padre, rounded-lg para bordes suaves y object-cover para evitar que se deforme al recortar.

Para los textos diferencias jerarquía con tamaños y pesos:

• Título: text-sm font-light para que sea discreto.
• Precio: text-lg font-medium porque es la información que más importa al usuario.
• Wrappers internos: flex items-center gap-2 para separar elementos sin romper la alineación.

La propiedad object-cover en CSS recorta la imagen manteniendo su proporción original, lo que evita estiramientos que afean cualquier e-commerce.

Cómo paso datos con props al componente OrderCard

Un componente reutilizable necesita recibir información desde fuera. Por eso OrderCard acepta props y desestructura solo lo que necesita: title, imageUrl y price.

jsx const OrderCard = props => { const { title, imageUrl, price } = props return ( <div className='flex justify-between items-center mb-3'> <figure className='w-20 h-20'> <img className='w-full h-full rounded-lg object-cover' src={imageUrl} alt={title} /> </figure> <p className='text-sm font-light'>{title}</p> <p className='text-lg font-medium'>{price}</p> <XMarkIcon className='h-6 w-6 text-black cursor-pointer' /> </div> ) }

El ícono de cierre se importa desde Heroicons, el mismo paquete usado en clases anteriores. Más adelante ese ícono recibirá un onClick para eliminar productos, pero por ahora queda visible sin lógica.

¿Por qué desestructurar las props? Hace el código más legible y evita repetir props.title, props.price cada vez. Tomas solo las llaves que necesitas y trabajas con variables limpias.

Cómo renderizo OrderCard dentro del CheckoutSideMenu

El menú lateral ya tenía un título y un ícono para cerrarse. Falta pintar las cards de cada producto agregado. Para eso recurres al Context API, donde guardaste el array cartProducts.

Dentro de CheckoutSideMenu accedes al contexto e iteras con map. Cada producto se transforma en un OrderCard con sus props correspondientes:

jsx

<div className='px-6'> {context.cartProducts.map(product => ( <OrderCard key={product.id} title={product.title} imageUrl={product.images} price={product.price} /> ))} </div>

El atributo key con product.id es obligatorio en React cuando renderizas listas. Sin él, la consola muestra un warning y el rendimiento se degrada en listas largas.

Por qué el return con paréntesis cambia el resultado

Un detalle que pasa desapercibido: si usas llaves después del map, debes incluir un return explícito. Si usas paréntesis, el retorno es implícito. Confundir ambos hace que la card no se pinte aunque la lógica parezca correcta.

El contenedor padre recibe px-6 para alinearse con el resto de las vistas del e-commerce, y cada OrderCard lleva mb-3 para separar los elementos verticalmente.

¿Por qué mi map no renderiza nada? Probablemente estés usando llaves {} sin un return dentro. Cambia a paréntesis () para que el retorno sea implícito y el JSX se renderice.

Qué sigue para completar el carrito de compras

Con el componente listo, ya puedes agregar productos y verlos en el menú lateral. Sin embargo, quedan dos detalles importantes por resolver:

1. Bloquear el ícono de + cuando un producto ya está en el carrito, cambiándolo por un check visual.
2. Habilitar scroll dentro del menú para visualizar carritos con muchos productos.

Muéstrame en los comentarios cómo te quedó tu carrito de compras y qué estilos personalizaste en tu propio OrderCard.