Implementar la funcionalidad de eliminar elementos de un carrito de compras es una pieza fundamental en cualquier aplicación de e-commerce. Aquí se construye paso a paso la lógica necesaria usando React Context, un custom hook y el método filter de JavaScript para remover productos de forma eficiente y sin pasar props innecesarios entre componentes.
¿Cómo crear la función removeFromCart en el custom hook?
El punto de partida es el custom hook donde ya se gestiona el estado global con useState. Para añadir la capacidad de eliminar, se crea una nueva función llamada removeFromCart [0:30]. Esta función recibe un payload, que representa el producto que se quiere quitar del carrito.
Dentro de la función se utiliza setState respetando el spread operator (...state) para mantener todos los valores del estado que no se van a modificar [1:05]. La clave está en trabajar únicamente sobre la propiedad cart:
- Se accede a
state.cart y se aplica el método filter [1:30].
- El filter recorre cada item y compara
item.id con payload.id.
- Solo se conservan los elementos cuyo
id sea diferente al del producto que se quiere eliminar.
El método filter en JavaScript genera un nuevo array sin mutar el original, lo que es esencial para que React detecte el cambio de estado y vuelva a renderizar correctamente. Una vez definida la función, se exporta desde el contexto para que cualquier componente conectado pueda utilizarla [2:10].
¿Dónde y cómo conectar el componente para eliminar productos?
La función removeFromCart no se consume en el componente MyOrder, sino en OrderItem [2:25], porque es ahí donde se encuentra el ícono de cerrar (close) que representa la acción de eliminar visualmente.
Para conectar OrderItem al contexto global se siguen estos pasos:
- Importar
useContext desde React y AppContext desde el archivo de contexto [2:50].
- Desestructurar
removeFromCart usando useContext(AppContext).
- Crear una función intermedia llamada handleRemove que recibe un
product y ejecuta removeFromCart(product) [3:20].
- Asignar un onClick en la imagen de close que invoque
handleRemove pasándole el producto actual [3:45].
Este patrón de conectar componentes al contexto es muy común cuando se trabaja con React Context. Permite acceder a funciones y datos globales sin necesidad de pasarlos como props desde los componentes padres, evitando el problema conocido como prop drilling.
¿Por qué usar una función anónima en el onClick?
Un error frecuente al asignar eventos es ejecutar la función directamente en el render, lo que provoca que se dispare sin que el usuario haga clic. La solución es envolver la llamada dentro de una función anónima [5:20]:
jsx
onClick={() => handleRemove(product)}
De esta forma, handleRemove solo se ejecuta cuando el usuario interactúa con el botón, no al momento del renderizado.
¿Qué errores comunes pueden aparecer y cómo solucionarlos?
Durante la implementación surgieron dos errores reales que vale la pena destacar:
- Payload is not defined: se debió a un typo en el nombre de la variable dentro del custom hook [4:40]. Los errores tipográficos son extremadamente comunes y la consola del navegador es la mejor herramienta para detectarlos rápidamente.
- Ejecución inmediata de la función: al no usar la función anónima en el
onClick, el handler se ejecutaba al renderizar en lugar de al hacer clic [5:15].
Como se menciona durante la práctica, los errores son aliados del aprendizaje. Es normal repetirlos, pero lo importante es reconocer los patrones y saber dónde buscar la solución.
¿Cómo queda la funcionalidad completa del carrito?
Con esta implementación, la aplicación ya cuenta con tres capacidades esenciales funcionando en conjunto:
- Agregar productos al carrito.
- Eliminar productos individuales con un clic.
- Visualizar el total actualizado automáticamente tras cada operación.
Todo esto gestionado desde un estado global con React Context y un custom hook, lo que mantiene la arquitectura limpia y escalable. Si has llegado hasta aquí, comparte qué otros métodos de array usarías para mejorar la lógica del carrito.
