Cuando construyes un e-commerce con React, agregar productos al carrito es solo la mitad del camino. La otra mitad, igual de importante, es permitir que el usuario elimine productos de forma fluida y en tiempo real. Aquí se explica paso a paso cómo lograrlo usando el método filter de JavaScript y el contexto global de React.
¿Cómo funciona la eliminación de productos en el carrito?
La lógica parte de un principio sencillo: cada producto tiene un ID único que lo identifica. Cuando el usuario presiona el ícono de la X junto a un producto, se ejecuta una función que filtra la lista actual del carrito y devuelve todos los elementos excepto el que coincide con ese ID.
Esto se implementa dentro del componente CheckoutSideMenu, que ya se había construido en clases anteriores. La función se llama handleDelete y recibe como parámetro el ID del producto que se desea eliminar [1:30].
¿Qué hace exactamente la función handleDelete?
- Recibe el ID del producto presionado.
- Crea una constante llamada
filteredProducts que almacena el resultado de aplicar filter sobre context.cartProducts.
- Dentro del filter, compara el
product.id de cada elemento con el ID recibido y retorna únicamente los que sean diferentes [2:10].
- Finalmente, actualiza el estado global con
setCartProducts(filteredProducts), reemplazando la lista anterior por la lista filtrada [3:00].
El método filter es un array method de JavaScript que recorre cada elemento de un arreglo, evalúa una condición y devuelve un nuevo arreglo solo con los elementos que cumplen esa condición. En este caso, la condición es que el product.id sea distinto al ID del producto que el usuario quiere eliminar.
javascript
const handleDelete = (id) => {
const filteredProducts = context.cartProducts.filter(
(product) => product.id !== id
);
context.setCartProducts(filteredProducts);
};
¿Cómo se conecta handleDelete con el componente OrderCard?
Una vez creada la función en CheckoutSideMenu, es necesario pasarla como prop al componente OrderCard, que es el que renderiza cada producto dentro del carrito [3:30].
En CheckoutSideMenu se agrega la prop así:
jsx
<OrderCard
id={product.id}
handleDelete={handleDelete}
// ...otras props
/>
Dentro de OrderCard, se recibe handleDelete como prop y se asocia al evento onClick del ícono de la X (XMarkIcon) [3:50]:
jsx
<XMarkIcon onClick={() => handleDelete(id)} />
Es fundamental recordar que handleDelete necesita recibir el id como argumento. Por eso también se pasa id como prop desde el componente padre.
¿Por qué funciona la actualización en tiempo real?
Gracias al contexto global de React, cuando se ejecuta setCartProducts con la nueva lista filtrada, todos los componentes que consumen ese contexto se re-renderizan automáticamente. No hace falta ningún paso adicional: el carrito se actualiza visualmente de inmediato al eliminar un producto [4:20].
Este patrón demuestra el poder del state management con React Context:
- El estado vive en un solo lugar (contexto global).
- Cualquier componente puede leerlo y modificarlo.
- Los cambios se reflejan de forma instantánea en toda la interfaz.
¿Qué conceptos clave se aplican en esta funcionalidad?
El paso de props entre componentes padre e hijo permite que funciones definidas en un nivel superior se ejecuten desde componentes más internos. Esto mantiene la lógica centralizada y los componentes hijos enfocados en la presentación.
El uso de IDs únicos como identificadores es una práctica esencial. Sin ellos, no sería posible distinguir qué elemento específico debe eliminarse de una lista.
Por último, el patrón de inmutabilidad está presente: en lugar de modificar directamente el arreglo original de cartProducts, se crea uno nuevo con filter y se reemplaza el estado. Esto es una buena práctica en React porque garantiza que el framework detecte los cambios correctamente.
El siguiente paso será calcular y mostrar el total de los productos en el carrito. Comparte en los comentarios cómo te ha ido implementando la funcionalidad de agregar y eliminar productos.
