Comprender el manejo del estado es fundamental para construir aplicaciones interactivas con React. Al trabajar con useState, uno de los hooks más utilizados de la API de React, puedes controlar cómo cambia la información en tu interfaz cada vez que el usuario interactúa con ella. A continuación se explica paso a paso cómo integrar un evento de clic en un botón de "agregar al carrito" y reflejar ese cambio en la UI.
¿Qué es useState y cómo se importa en un componente?
El hook useState es una función que forma parte de la API de React y permite crear y gestionar el estado dentro de un componente funcional. Para utilizarlo, se importa directamente desde React en la parte superior del archivo [0:42].
La convención de nombres en los hooks de React sigue un patrón claro: siempre inician con la palabra use seguida del nombre del hook. Así es fácil identificar qué valores están asociados al estado o al ciclo de vida del componente.
Al declarar useState dentro del componente, se utiliza desestructuración de arreglos para obtener dos elementos [1:14]:
- cart: la variable que almacena el valor actual del estado.
- setCart: la función modificadora que permite actualizar ese estado.
El valor que se pasa como argumento a useState define el estado inicial. Puede ser un string, un booleano, un número, un objeto o un arreglo, según lo que necesite la aplicación [1:42].
¿Cómo se conecta un evento onClick con el estado?
Para que un elemento de la interfaz reaccione al clic del usuario, React ofrece el atributo onClick, que captura la interacción y ejecuta una función asociada [2:20].
La práctica recomendada es crear una función intermedia con la convención de nombre handle, por ejemplo handleClick o handleCard. Esta función se encarga de llamar a setCart con el nuevo valor que se desea asignar al estado [2:40].
jsx
import React, { useState } from 'react';
const ProductItem = () => {
const [cart, setCart] = useState('');
const handleCard = () => {
setCart('hola mundo');
};
return (
<figure onClick={handleCard}>
<img src={addToCartIcon} alt="Add to cart" />
<p>{cart}</p>
</figure>
);
};
Este fragmento muestra la estructura completa: se importa useState, se declara el estado con un string vacío como valor inicial, se crea la función handleCard que actualiza el estado y se vincula al evento onClick del elemento figure.
¿Qué sucede cuando se ejecuta el clic?
Al dar clic sobre la imagen de add to cart, se ejecuta handleCard, que a su vez llama a setCart('hola mundo') [4:10]. Esto reemplaza el valor vacío del estado por el texto "hola mundo", y React re-renderiza el componente para reflejar el cambio en la interfaz.
Antes del clic no aparece nada visible porque el estado inicial es un string vacío. Después del clic, el texto "hola mundo" se muestra en la UI gracias a la interpolación de {cart} dentro del JSX.
¿El estado se conserva al recargar la página?
No. Cada vez que se actualiza la página, el componente se monta nuevamente y useState se inicializa con el valor original [4:48]. Si el estado inicial es un string vacío, vuelve a estar vacío. Si se cambia el valor inicial a "hola", al cargar la página aparecerá "hola" y al hacer clic cambiará a "hola mundo" [5:10].
Este comportamiento es importante: el estado gestionado con useState vive exclusivamente en memoria durante el ciclo de vida del componente.
¿Por qué JSX permite mezclar lógica y presentación?
JSX es la sintaxis que permite escribir HTML y XML directamente dentro de JavaScript [3:40]. Gracias a esta estructura se pueden llamar funciones, asignar variables y utilizar atributos propios de React como onClick, todo dentro del mismo bloque de código.
Esta convivencia entre lógica y presentación es lo que hace que los componentes de React sean autocontenidos y fáciles de mantener. Los hooks como useState potencian esta capacidad al permitir que cada componente gestione su propia información sin depender de configuraciones externas.
Si ya lograste que el botón imprima "hola mundo" en tu interfaz, el siguiente paso es aplicar esta misma mecánica para construir interacciones más complejas, como un toggle que muestre u oculte un menú de checkout. ¿Qué otro estado te gustaría manejar en tu aplicación? Compártelo en los comentarios.
