Estado y Eventos en React para Aplicaciones Interactivas
Contenido del curso
Elvis Saavedra
Nicolas Gimenez
Miguel Angel Oviedo Mejia
Juan Antonio García Sánchez
Alejandro Campuzano
Stiven Jiménez
Oscar Alejandro López Vivas
Josue Cerron Tuesta
Omar Gabriel Aguilar Moscoso
Rodrigo Ramos Xochiteotzin
Julian Niño
Roner Jose Ortega Cueto
Irving Juárez
David Santiago Diaz
Diego Reyes Cabrera
Juan Castro
Profesor
Orangel Gonzalez
Moises Hernandez
Victor Gustavo Bazaldua Gomez
Miguel Angel Berrio Huamani
Jorge De La Fuente
Felipe Moreno
Lisbeth Quintero
Zoraida Ortiz
Rubén Ernesto Aragón Gil
cristhian salas
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); } }