Eliminar productos del carrito de compras en React es una funcionalidad clave de cualquier e-commerce. Aquí aprendes a implementarla usando el método filter, props y un contexto global, partiendo del componente CheckoutSideMenu ya creado en clases anteriores.

¿Cómo funciona la eliminación de productos en el carrito?

La idea es simple: cuando presionas la X de un producto, ese elemento desaparece del carrito. Para lograrlo, necesitas identificar qué producto se está eliminando y actualizar el estado global que guarda los productos.

Todo gira alrededor de tres piezas: una función handleDelete, el método filter de JavaScript y la actualización del contexto con setCartProducts.

¿Por qué usar el id del producto para eliminarlo? Porque los id son únicos. Es la única forma confiable de saber exactamente qué elemento presionaste, sin riesgo de borrar uno parecido por error.

¿Cómo crear la función handleDelete con filter?

Dentro de CheckoutSideMenu defines una función que recibe el id del producto a eliminar. Adentro creas una constante llamada filteredProducts que recorre todos los productos del carrito y devuelve solo los que no coinciden con ese id [01:10].

El flujo queda así:

• Recibe el id como parámetro de la función.
• Aplica filter sobre context.cartProducts.
• Retorna los productos cuyo product.id sea distinto al id recibido.
• Actualiza el estado global con setCartProducts(filteredProducts).

El resultado es que el contexto se reescribe con la lista nueva, ya sin el producto eliminado. Y aquí viene lo interesante: como el contexto es global, cualquier componente que lo consuma se actualiza al instante.

jsx const handleDelete = (id) => { const filteredProducts = context.cartProducts.filter( product => product.id !== id ) context.setCartProducts(filteredProducts) }

¿Cómo pasar handleDelete al componente OrderCard como prop?

La función vive en CheckoutSideMenu, pero quien necesita ejecutarla es OrderCard, el componente que renderiza cada producto con su ícono X. La conexión se hace mediante props.

Desde CheckoutSideMenu envías dos props al OrderCard: el id del producto y la función handleDelete. Después, dentro de OrderCard, capturas ambas y las usas en el evento onClick del ícono.

jsx <XMarkIcon onClick={() => handleDelete(id)} />

Fíjate en el detalle: el onClick no recibe handleDelete directamente, sino una función flecha que la ejecuta pasándole el id. Si la pasas sin envolver, se ejecutaría sola al renderizar.

¿Qué hace el método filter en JavaScript? Recorre un array y devuelve uno nuevo solo con los elementos que cumplen la condición que tú defines. No modifica el array original.

¿Por qué usar contexto global para el carrito de compras?

Manejar el carrito desde un contexto global te ahorra pasar props a través de múltiples niveles de componentes. Cuando llamas a setCartProducts, todos los componentes suscritos al contexto reflejan el cambio sin lógica adicional.

Esto es lo que permite que al presionar la X en OrderCard, la vista del CheckoutSideMenu se actualice de inmediato. No tienes que recargar, ni sincronizar estados manualmente, ni mover datos entre hermanos.

¿Qué conceptos clave estás aplicando aquí?

Esta funcionalidad junta varios fundamentos de React y JavaScript moderno que conviene tener claros:

• Renderizado reactivo: al cambiar el estado del contexto, React vuelve a pintar los componentes que dependen de él.
• Inmutabilidad: filter crea un array nuevo en lugar de mutar el original, lo que React necesita para detectar el cambio.
• Comunicación padre-hijo: las props permiten que el hijo (OrderCard) ejecute lógica del padre (CheckoutSideMenu).
• Identificadores únicos: el id es la pieza que conecta la interfaz con la fuente de datos.

Después de aplicar el filter, la lista resultante se asigna al contexto y el carrito queda actualizado. Probarlo en el navegador es la mejor validación: agregas productos, presionas la X y desaparecen al instante.

¿Cómo te ha ido agregando y eliminando elementos del carrito? Cuéntalo en los comentarios y comparte si encontraste algún detalle distinto al implementarlo.