Conectar componentes que no comparten una relación directa de padre-hijo es uno de los retos más frecuentes al construir interfaces en React. Aquí se resuelve ese problema usando Context API para que un clic en una card de producto actualice en tiempo real el contador del carrito de compras en el navbar, sin pasar props manualmente entre componentes.
¿Cómo se configura el estado global en el proveedor de contexto?
El punto de partida es el archivo de contexto, donde se define el estado que toda la aplicación podrá leer y modificar. En clases anteriores existía un estado local dentro del componente home; ahora esa lógica se traslada al provider para convertirla en estado global [0:42].
- Se declara un estado con
useState importado desde React.
- La variable se llama
count y su función actualizadora setCount.
- El valor inicial es cero, porque el carrito arranca vacío.
Dentro del provider se utiliza la prop value para exponer la información a todos los componentes hijos. Se pasa un objeto que contiene tanto count como setCount [1:15]. De esta forma, cualquier componente dentro del árbol puede leer el valor actual del contador y también modificarlo.
¿Por qué se envían el valor y la función actualizadora juntos?
Enviar ambos elementos permite que los componentes consumidores no solo consulten el dato, sino que también disparen cambios de estado. El provider envuelve a App, es decir, a toda la aplicación, lo que garantiza que la información esté disponible en cualquier nivel de la jerarquía de componentes [1:30].
¿Cómo se escucha el evento de clic y se incrementa el contador?
En el componente card existe un ícono de más (+). La tarea es que cada vez que el usuario haga clic en él, el contador suba en uno [2:05].
- Se agrega un
onClick al ícono.
- Dentro del handler se llama a
context.setCount.
- El nuevo valor se calcula con
context.count + 1, tomando siempre el valor previo para no perder incrementos anteriores [2:42].
Para que context esté disponible dentro de card, se importan dos cosas:
- El hook
useContext desde React.
- El contexto creado previamente:
ShoppingCartContext, que se exporta desde el archivo de contexto [3:30].
Se declara una variable context igualada a useContext(ShoppingCartContext). Con esto el componente queda suscrito al estado global y puede tanto leerlo como actualizarlo.
¿Cómo verificar que el estado se actualiza correctamente?
Una técnica rápida es colocar un console.log dentro del archivo de contexto para imprimir el valor de count [4:15]. Al abrir el navegador e inspeccionar la consola:
- Aparece
count: 0 como valor inicial.
- Cada clic en el botón más incrementa el número: 1, 2, 3… [4:35].
Este paso confirma que el estado global se modifica correctamente antes de reflejarlo en la interfaz.
¿Cómo se refleja el contador en el navbar del carrito?
El último paso es que el navbar lea ese mismo count y lo muestre junto al ícono del carrito. Para ello se repite el patrón de consumo del contexto dentro del componente navbar [5:05]:
- Se importa
useContext y ShoppingCartContext.
- Se crea la variable
context con useContext(ShoppingCartContext).
- Se reemplaza el valor estático
0 por {context.count} [5:15].
Al guardar y volver al navegador, el carrito ya refleja el número acumulado. Cada nuevo clic en cualquier card actualiza el contador de forma inmediata y visible en el navbar [5:40].
Antes de dar por terminada la funcionalidad, conviene eliminar el console.log que se añadió para depuración, evitando que quede en producción [6:05].
Con estos pasos queda implementada la primera funcionalidad real con React Context: un componente emite una acción, el estado global se actualiza y otro componente completamente distinto refleja el cambio al instante. Muestra en los comentarios cómo te quedó tu carrito de compras funcionando.
