Estado y Eventos en React para Aplicaciones Interactivas

¿Cómo utilizar el estado de React para hacer una aplicación más dinámica?

La clave para mejorar la interactividad de nuestra aplicación es utilizar el estado de React. Este concepto nos permite mantener y actualizar la información dinámica en nuestra aplicación, haciendo que reaccione a las interacciones de los usuarios. Vamos a ver cómo implementarlo para cambiar un valor fijo, como un “cero”, a un número que refleje el número de boletos que un usuario desea comprar.

¿Cómo iniciar el estado utilizando React Hooks?

Para empezar, usaremos los React Hooks, que nos permiten añadir estado a nuestros componentes funcionales. La función useState() nos ayuda a mantener el estado:

const [quantity, setQuantity] = React.useState(0);

• quantity: es el estado inicial, que comenzaremos en 0.
• setQuantity: es la función que utilizaremos para actualizar quantity.

¿Cómo agregar eventos de clic en los botones?

Los eventos en React se manejan a través de funciones y propiedades que comienzan con "on". Aquí es donde se utiliza onClick para llamar a setQuantity() cada vez que hacemos clic en un botón. Por ejemplo, incrementaremos la cantidad de boletos con un botón "+" de la siguiente manera:

<button onClick={() => setQuantity(quantity + 1)}>
  Aumentar Boletos
</button>

¿Cómo restar la cantidad de boletos con botones?

Para decrementar la cantidad, creamos un método similar para el botón de "-":

<button onClick={() => setQuantity(quantity - 1)}>
  Disminuir Boletos
</button>

Lo importante es ajustar la lógica para que no se permita un número negativo de boletos.

¿Cómo limitar la cantidad de boletos disponibles?

Un desafío común es limitar el número de boletos que un usuario puede solicitar. Esto lo lograremos usando la propiedad disabled en los botones, que se activa o desactiva según la cantidad seleccionada.

¿Cuándo desactivar botones?

• Botón de disminución: debe desactivarse si la cantidad es menor o igual a cero.

<button onClick={() => setQuantity(quantity - 1)} disabled={quantity <= 0}>
  Disminuir Boletos
</button>

• Botón de incremento: debe desactivarse cuando la cantidad es mayor o igual a la cantidad disponible de boletos para una película.

<button onClick={() => setQuantity(quantity + 1)} disabled={quantity >= movie.available}>
  Aumentar Boletos
</button>

¿Qué hacer si encuentras errores al implementar estas funciones?

Es fundamental revisar cualquier error tipográfico o lógico, especialmente cuando se manejan propiedades o eventos complejos. Un caso típico podría ser un nombre de propiedad mal escrito que impide que la lógica aplicada funcione correctamente.

Al juntar estos principios y ajustar según sea necesario, podemos lograr que nuestra aplicación sea mucho más dinámica e interactiva, brindando a los usuarios una experiencia mejorada y funcional. Anímate a seguir experimentando con React para continuar ampliando tus habilidades en el desarrollo web. ¡El mundo de la programación está lleno de posibilidades!