Estado y Eventos en React para Aplicaciones Interactivas

Clase 10 de 28 • Curso de Frameworks y Librerías de JavaScript

Resumen

¿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!

Elvis Saavedra

student•

Así quedaría con el reto:

import React from 'react';

export default function Form(props) {
  const [quantity, setquantity] = React.useState(0);
  const { movie } = props;
  return (
    <form>
      <h4>{movie.name}</h4>
      <button type='button' onClick={() => setquantity(quantity - 1)} disabled={quantity === 0}>
        -
      </button>
      {quantity}
      <button
        type='button'
        onClick={() => setquantity(quantity + 1)}
        disabled={movie.available === quantity}
      >
        +
      </button>
    </form>
  );
}

Nicolas Gimenez

student•

excelente

Miguel Angel Oviedo Mejia

student•

Ese codigo no funciona

Juan Antonio García Sánchez

student•

Sorprendente como funcionan los estados en cada elemento sin afectar a los demás, ahorrándonos líneas de código 🤯

Alejandro Campuzano

student•

estaba acostumbrado a que al llamar un dato de otro componente siempre era necesario hacer props.movie por ejemplo. Muy buen tip el hacer const { movie } = props; al inicio para llamar las propiedades sin necesidad de props.dato

Stiven Jiménez

student•

Esto se llama Object destructuring
aquí te dejo documentación de como lo puedes usar https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Destructuring_assignment#object_destructuring

Oscar Alejandro López Vivas

student•

Me puse a inventar un poco y logre mostrar también los boletos que quedan:

import React from "react";

export default function Form(props) {
  const [quantity, setQuantity] = React.useState(0);
  const { movie } = props;
  return (
    <form>
      <h3>{movie.name}</h3>
      <h5>Available: {movie.available - quantity}</h5>
      <button
        type="button"
        onClick={() => setQuantity(quantity - 1)}
        disabled={quantity === 0}
      >
        -
      </button>
      {quantity}
      <button
        type="button"
        onClick={() => setQuantity(quantity + 1)}
        disabled={quantity === movie.available}
      >
        +
      </button>
    </form>
  );
}

Josue Cerron Tuesta

student•

Excelente bro!

Omar Gabriel Aguilar Moscoso

student•

me encanto react

Rodrigo Ramos Xochiteotzin

student•

van como atributos en los botones

para el menos

disabled={quantity <= 0}

para el más

disabled={quantity >= movie.available}

Julian Niño

student•

Veo que el curso esta hace poco mas de 1 año, en 2022 digo que esta emocionante !!! buena idea de usar codesandbox para evitar subirlo a algun repo para cosas pequeñas o de practicas iniciales

Roner Jose Ortega Cueto

student•

Es excelente para desarrollo mas no para produccion. Supongo que en dado caso quieras descargar el codigo completo lo madas a tu repo de github desde ahi mismo.

Irving Juárez

student•

Pude hacer que aparezca el boton de menos "-" cuando quantity fuera mayor que 0, y el disable de manera normal .

David Santiago Diaz

student•

Si quieren aprender o profundizar conocimientos acerca de los React Hooks, les recomiendo el Curso profesional de React Hooks. 😀

Diego Reyes Cabrera

student•

Estuve como media hora analizando por qué mi boton no funcionaba... Y era porque escribí "onclick" en vez de "onClick..." Estén pendientes con eso. Alguien sabe por qué se escribe con camelCase y no todo en minusculas como un html tag normal?

Juan Castro

teacher•

Porque así lo requiere React. Sin camelCase sería el atributo onclick de toda la vida en HTML (y no funcionan exactamente igual). :D

Orangel Jose Gonzalez Urbina

student•

Todo lo que empiece con "on" en React, significa que es un evento.

Moises Hernandez

student•

Se puede hacer una función para manejar el estado, pero para simplificar se puede también hacer uso del operador condicional ternario.

<button
	type='button'
	onClick={()=> handleRes()}
	disabled={count<1 ? true : false}
>
-
</button>

Victor Gustavo Bazaldua Gomez

student•

Este es mi primer aporte. Me encanta esa sensacion de pensar en como solucionar este tipo de tareas y cuando queda me siento super feliz :D



import React from "react";

export default function Form(props){
  const [cantidad,setCantidad] = React.useState(0);
  const{movie} = props;
  return (<form>
    <h4>{movie.name}</h4>
    <button type="button" onClick ={()=>
       setCantidad(cantidad -1)} disabled = {cantidad===0}> - </button> 
    {cantidad} 
     <button type="button" onClick={()=>
      setCantidad(cantidad + 1)}disabled ={cantidad ===movie.lugares }> + </button>
  </form>);
}

Miguel Angel Berrio Huamani

student•

Mi solución

import React from "react";

export default function Form(props) {
  const [quantity, setQuantity] = React.useState(0);
  const { movie } = props;
  return (
    <form>
      <h4>{movie.name}</h4>
      <h5>{movie.available}</h5>
      <button
        type="button"
        onClick={() => setQuantity(quantity - 1)}
        disabled={quantity < 1}
      >
        {" "}
        -{" "}
      </button>
      {quantity}
      <button
        type="button"
        onClick={() => setQuantity(quantity + 1)}
        disabled={quantity >= movie.available}
      >
        {" "}
        +{" "}
      </button>
    </form>
  );
}

Jorge De La Fuente

student•

import React from 'react';

export default function Form(props) {
  const [quantity, setQuantity] = React.useState(0);
  const {movie} = props;  
    return(
      <form>
        <h4>{movie.name}</h4>
        <button type="button" onClick={() => 
          {if (quantity === 0) 
          {setQuantity(quantity)
          } else {
          setQuantity(quantity - 1)
        }}}> -</button>
        {quantity}
        <button type="button" onClick={() => setQuantity(quantity + 1)}> + </button>
      </form>
    );

Fue lo primero que se me ocurrio, no queda disabled pero no entran numeros negativos

Felipe Moreno

student•

import { React, useState } from "react";

export function Form({ name, available }) {
  const [tickets, setTickets] = useState(0);

  const handleClick = function (e) {
    if (e.target.id === "sumar") {
      setTickets(tickets + 1);
    } else if (e.target.id === "restar") {
      if (tickets > 0) {
        setTickets(tickets - 1);
      }
    }
  };

  return (
    <form>
      <h4> {name} </h4>
      <button
        type="button"
        id="sumar"
        onClick={handleClick}
        disabled={tickets >= available}
      >
        +
      </button>
      {tickets}
      <button
        type="button"
        id="restar"
        onClick={handleClick}
        disabled={tickets <= 0}
      >
        -
      </button>
    </form>
  );
}

Lisbeth Quintero

student•

Yo escribe disable en lugar de disabled, puede pasar y por eso no te funciona, chequéenlo. 😅

Zoraida Ortiz

student•

Hola, yo lo haria asi.

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

Rubén Ernesto Aragón Gil

student•

     <button
        type="button"
        onClick={() => setQuantity(quantity - 1)}
        disabled={quantity <= 0}
      >
        -
      </button>
      {quantity}
      <button
        type="button"
        onClick={() => setQuantity(quantity + 1)}
        disabled={quantity >= movie.available}
      >
        +
      </button>

cristhian salas

student•

He agregado un par de cosas, te muestra los tickets disponibles y al quedar 3 o menos boletos te avisa que quedan pocos boletos ademas el numero tiene una animación para hacerlo grande y cambiar de color.

JSX

import React from "react";

export default function Form(props) {
  const [quantity, setQuantity] = React.useState(0);
  const { movie } = props;

  return (
    <form id="form">
      <h3 className="movie">{movie.name}</h4>
      <div className="ticketContainer">
        <h4 className="ticket">Tickets</h5>
        <button
          type="button"
          onClick={() => setQuantity(quantity + 1)}
          disabled={movie.available === quantity}
        >
          +
        </button>{" "}
        {quantity}{" "}
        <button
          type="button"
          onClick={() => setQuantity(quantity - 1)}
          disabled={quantity === 0}
        >
          -
        </button>
      </div>
      <div className="available">
        <h5>Available</h5>
        {movie.available - quantity <= 3 ? (
          <div>
            <p className="fewTickets">{movie.available - quantity}</p>
            <p> Pocos disponibles </p>
          </div>
        ) : (
          <p>{movie.available - quantity}</p>
        )}
      </div>
    </form>
  );
}

CSS

.App {
  font-family: sans-serif;
  text-align: center;
}
#form {
  font-family: sans-serif;
  display: grid;
  grid-template-areas:
    "movies movies"
    "tickets available";
  place-items: center;
}
.movie {
  background-color: aliceblue;
  width: auto;
  height: auto;
  border-radius: 8px;
  grid-area: movies;
  margin-top: 4px;
}
.ticketContainer {
  grid-area: tickets;
}
.available {
  grid-area: available;
}
.fewTickets {
  animation: throb 2s ease-in-out infinite;
}
@keyframes throb {
  0% {
    transform: scale(1);
  }
  50% {
    transform: scale(1.5);
    color: red;
  }
  100% {
    transform: scale(1);
  }
}