Depurar un e-commerce en React implica revisar la lógica de filtrado, limpiar inputs después de un checkout y conectar el contador del carrito con el estado real de los productos. Si estás construyendo una tienda online con Context API, estos ajustes finales marcan la diferencia entre una app que funciona y una que se siente profesional.

Por qué el filtro por categoría no muestra los productos correctos

El primer detalle aparece al hacer clic en una categoría como clothes o electronics: la vista no responde como debería. La causa está en el componente Home, donde la condición original obligaba a que existiera un filtro por título para renderizar los productos.

La solución pasa por reescribir el condicional. En lugar de evaluar el título, basta con preguntar si existen filtered items. Si hay elementos filtrados, se muestran las cards; si no, aparece un mensaje de fallback.

¿Qué son los filtered items en React? Son el array resultante de aplicar uno o varios filtros (por título, categoría o ambos) sobre la lista original de productos dentro del contexto global.

Este cambio reduce líneas de código y baja la complejidad ciclomática del componente, porque el contexto ya se encarga de decidir qué productos entran en el filtro [01:30].

Cómo limpiar el input de búsqueda después del checkout

Al interactuar con la app aparece un segundo bug: tras agregar productos y hacer checkout, la lista de Shopping muestra muy pocos elementos. Para diagnosticarlo, conviene agregar tres console.log temporales que impriman:

• Search by title.
• Search by category.
• Filtered items.

Al revisar la consola del navegador, el valor de searchByTitle sigue guardando el texto que escribiste antes (por ejemplo, tast), aunque visualmente el input parezca vacío. Ese estado residual es el que filtra de más y oculta productos.

Dónde resetear el estado del input

El reseteo debe ocurrir justo cuando el usuario presiona el botón de checkout dentro del CheckoutSideMenu. Ahí se llama a context.setSearchByTitle(null), usando el mismo valor por defecto que tenía el estado al inicializarse [05:50].

jsx context.setSearchByTitle(null)

Con esa línea, el input se limpia automáticamente al cerrar la orden y la lista vuelve a mostrar todos los productos disponibles.

¿Por qué se debe limpiar un input después de una acción en React? Porque el estado vive fuera del DOM. Si no lo reseteas explícitamente, conserva el último valor y sigue afectando filtros, búsquedas o validaciones aunque visualmente parezca vacío.

Cómo conectar el contador del carrito con cartProducts

El último detalle está en el Navbar. El icono del carrito muestra un contador, pero estaba enlazado a una variable count independiente que no reflejaba los productos reales agregados.

La corrección es directa: reemplazar context.count por cartProducts.length. Así, el número que ve el usuario corresponde exactamente al tamaño del array de productos en el carrito.

jsx {cartProducts.length}

Después del cambio, el contador inicia en cero, sube cuando agregas productos y vuelve a cero al hacer checkout, sincronizado con el estado real de la app [08:20].

¿Qué hace .length en un array de React? Devuelve el número de elementos que contiene. Es la forma más limpia de mostrar contadores dinámicos sin manejar variables paralelas que puedan desincronizarse.

Qué aprendiste al cerrar el flujo del e-commerce

Con estos tres ajustes, la aplicación queda funcional de punta a punta:

• Filtrado por categoría y por título trabajando en conjunto desde el contexto.
• Input de búsqueda que se limpia automáticamente tras un checkout.
• Contador del carrito sincronizado con cartProducts.

La lección de fondo es que los bugs en una Single Page Application casi siempre viven en el estado, no en el render. Revisar con console.log los valores en cada paso del flujo es la forma más rápida de encontrarlos antes de eliminar esos logs en la versión final.

Muéstrame en los comentarios cómo te quedó tu e-commerce y si aplicaste un diseño distinto al del proyecto base.