Compartir estado entre componentes distantes es uno de los retos más comunes al construir interfaces con React. Aquí se resuelve exactamente eso: conectar el context de la aplicación al componente header para que refleje en tiempo real cuántos productos se han añadido al carrito desde cualquier product item.
¿Cómo se conecta el context al componente header?
El primer paso consiste en importar tanto el AppContext como el hook useContext dentro del componente header. Con estas dos piezas se establece la comunicación con el estado global de la aplicación.
jsx
import { useContext } from 'react';
import { AppContext } from '../context/AppContext';
Dentro del componente se crea una constante que extrae el state del context [01:05]:
jsx
const { state } = useContext(AppContext);
Con esta línea, todo lo que se modifique en el estado compartido —por ejemplo, al ejecutar addToCart desde un product item— quedará disponible de inmediato en el header.
¿Qué validación se necesita para mostrar el contador del carrito?
Antes de renderizar el número de elementos, es necesario verificar que el arreglo cart exista y contenga al menos un producto. La validación se realiza con un operador ternario [01:30]:
jsx
{state.cart.length > 0 ? state.cart.length : null}
- Si
state.cart.length es mayor que cero, se muestra la cantidad de productos.
- Si no hay elementos, se retorna null para que no aparezca ningún indicador visual.
Esto evita mostrar un valor numérico fijo —como el "2" que estaba por defecto— y también elimina el círculo decorativo cuando el carrito está vacío.
¿Por qué el círculo aparecía sin productos?
El problema radicaba en que la validación solo cubría el número, pero no el contenedor <div> que dibujaba el círculo [02:45]. La solución fue mover la validación condicional al nivel del elemento HTML completo, de modo que todo el bloque se oculte cuando no hay productos.
jsx
{state.cart.length > 0 && (
<div className="cart-badge">
{state.cart.length}
</div>
)}
De esta forma el indicador aparece únicamente cuando existe al menos un item agregado.
¿Qué error surgió con el símbolo de pesos?
Durante las pruebas se detectó que el contador mostraba un símbolo de pesos junto al número [03:50]. Esto ocurría porque se estaba utilizando una estructura de template literals innecesaria que arrastraba caracteres adicionales. Al pasar directamente el valor de state.cart.length sin interpolación extra, el problema desapareció.
¿Cómo funciona el flujo completo entre product item y header?
El ciclo de datos sigue un camino claro:
- El componente ProductItem invoca la función addToCart cada vez que se presiona el botón de agregar [04:10].
- addToCart recibe el objeto del producto y lo incorpora al arreglo cart dentro del estado global.
- El header, al estar suscrito al mismo context mediante useContext, detecta el cambio y re-renderiza el contador.
Cada clic en el botón añade una entrada al arreglo, lo que significa que un mismo producto puede aparecer varias veces. En la demostración, tras múltiples clics en distintos productos, el contador llegó a once elementos [05:00].
El concepto de useContext permite que componentes sin relación directa de padre-hijo compartan información sin necesidad de pasar props manualmente en cada nivel del árbol. Esto simplifica la arquitectura y mantiene el código limpio cuando varios componentes necesitan acceder al mismo estado.
¿Has tenido algún caso donde el context no fue suficiente y necesitaste otra solución para manejar el estado? Comparte tu experiencia.
