Contenido del curso
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?
<button onClick={() => setQuantity(quantity - 1)} disabled={quantity <= 0}> Disminuir Boletos </button>
<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!
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> ); }
excelente
Ese codigo no funciona
Sorprendente como funcionan los estados en cada elemento sin afectar a los demás, ahorrándonos líneas de código 🤯
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
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
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> ); }
Excelente bro!
me encanto react
van como atributos en los botones
para el menos
disabled={quantity <= 0}
para el más
disabled={quantity >= movie.available}
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
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.
Pude hacer que aparezca el boton de menos "-" cuando quantity fuera mayor que 0, y el disable de manera normal .
Si quieren aprender o profundizar conocimientos acerca de los React Hooks, les recomiendo el Curso profesional de React Hooks. 😀
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?
Porque así lo requiere React. Sin camelCase sería el atributo onclick de toda la vida en HTML (y no funcionan exactamente igual). :D
Todo lo que empiece con "on" en React, significa que es un evento.
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>
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>); }
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> ); }
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
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> ); }
Yo escribe disable en lugar de disabled, puede pasar y por eso no te funciona, chequéenlo. 😅
Hola, yo lo haria asi.
<button type='button' onClick = {() => setQuantity(quantity - 1)} disabled = {quantity <=0}> - </button>
<button type="button" onClick={() => setQuantity(quantity - 1)} disabled={quantity <= 0} > - </button> {quantity} <button type="button" onClick={() => setQuantity(quantity + 1)} disabled={quantity >= movie.available} > + </button>
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); } }