Cursos Empresas Blog Live Conf Eventos Precios

0:0010:10

Recursos

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!

Estado y Eventos en React para Aplicaciones Interactivas

Curso de Frameworks y Librerías de JavaScript

Clase 10 de 28

Clase 10 / 28

cristhian salas

Hace 4 años

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);
  }
}

Comentarios (71)71 comentarios

Elvis Saavedra

Hace 6 años

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

excelente

Miguel Angel Oviedo Mejia

Hace 5 años

Ese codigo no funciona

Juan Antonio García Sánchez

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

Alejandro Campuzano

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

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

Josue Cerron Tuesta

Excelente bro!

Omar Gabriel Aguilar Moscoso

me encanto react

Rodrigo Ramos Xochiteotzin

van como atributos en los botones

para el menos

disabled={quantity <= 0}

para el más

disabled={quantity >= movie.available}

Julian Niño

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

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

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

David Santiago Diaz

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

Diego Reyes Cabrera

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

Profesor

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 Gonzalez

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

Moises Hernandez

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

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

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

Hace 3 años

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

Lisbeth Quintero

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

Zoraida Ortiz

Hola, yo lo haria asi.

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

Rubén Ernesto Aragón Gil

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

Recursos

Resumen

Estado y Eventos en React para Aplicaciones Interactivas

Progreso del curso

Fundamentos del Desarrollo Web Profesional

Contexto y funcionamiento de los Frameworks JavaScript

Estilos con CSS, preprocesadores y CSS-in-JS

Cómo escalar sitios o aplicaciones web