No tienes acceso a esta clase

隆Contin煤a aprendiendo! 脷nete y comienza a potenciar tu carrera

Manejo del estado en React

10/28
Recursos

Aportes 69

Preguntas 1

Ordenar por:

驴Quieres ver m谩s aportes, preguntas y respuestas de la comunidad?

o inicia sesi贸n.

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>
      <h3>{movie.name}</h3>
      <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>
  );
}

Sorprendente como funcionan los estados en cada elemento sin afectar a los dem谩s, ahorr谩ndonos l铆neas de c贸digo 馃く

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>
      <h2>{movie.name}</h2>
      <h4>Available: {movie.available - quantity}</h4>
      <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>
  );
}

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

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

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铆 鈥渙nclick鈥 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?

Todo lo que empiece con 鈥渙n鈥 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 馃槃



import React from "react";

export default function Form(props){
  const [cantidad,setCantidad] = React.useState(0);
  const{movie} = props;
  return (<form>
    <h3>{movie.name}</h3>
    <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>
      <h3>{movie.name}</h3>
      <h4>{movie.available}</h4>
      <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>
        <h3>{movie.name}</h3>
        <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>
      <h3> {name} </h3>
      <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}</h3>
      <div className="ticketContainer">
        <h4 className="ticket">Tickets</h4>
        <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">
        <h4>Available</h4>
        {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);
  }
}

Hola, as铆 me quedo la soluci贸n para ambos botones:

return (
    <form>
      <h3>{movie.name}</h3>
      <button
        type="button"
        onClick={() => {
          setQuantity(quantity - 1);
        }}
        disabled={quantity === 0 ? true : false}
      >
        -
      </button>
      {quantity}
      <button
        type="button"
        onClick={() => {
          setQuantity(quantity + 1);
        }}
        disabled={quantity >= movie.available ? true : false}
      >
        +
      </button>
    </form>
  );

As铆

import React from "react";

export default function Form(Props) {
  const { movie, uwu } = Props;
  const [quantity,setQuantity]=React.useState(0)
  const [disabledBut,setDisabledBut]=React.useState(false)
  return (
    <div>
      <form>
        <h3>{movie.name}</h3>
        <button  type="button" onClick={
          ()=>
          {
            setQuantity(quantity+1)
            setDisabledBut(false)
          }
          } >+</button>
        {quantity}
        <button disabled={disabledBut} onClick={()=>
          { if (quantity>0)
            setQuantity(quantity-1)
            else{
              setDisabledBut(true)
            }
          }
          } type="button">-</button>
      </form>

    </div>
  );
}

Excelente clase, explica de forma muy ordenada las diferentes interacciones que nos encontramos al crear una App

As铆 qued贸 mi reto:

import React from "react";

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

  return (
    <form>
      <h3>{movie.name}</h3>
      <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>
  );
}

Me encanto esta clase!!! La verdad que la parte de colocarle el movie.available fue algo que no me esperaba y me encanto!

As铆 lo hice yo

import React from "react";

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

En caso de que no haya boletos disponibles, podemos agregar un condicional para mostrar un men煤 u otro

Hola camaradas, les dejo mi c贸digo utilizando sintaxis moderna

import { useState } from "react";

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

yo resolver铆a el reto as铆:


export default function Form(props) {
  const [quantity, setQuantity] = React.useState(0);
  const { movie } = props;
  return (
    <form>
      <h3>{movie.name}</h3>
      <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>
  );
}

a帽ad铆 tambi茅n un parrafo que nos dice cuantos boletos nos quedan:

    <p>Available: {movie.available - quantity}</p>

Hola, comunidad. Les comparto mi soluci贸n al reto.

Para el ( - ) :

disabled={!quantity}

Para el ( + ) :

disabled={!(movie.available-quantity)}

Siempre me adelanto para ver como podr铆a resolver el problema pero es mucho mejor lo que nos ense帽o el profe jaja

<from>
      <h3>{movie.name}</h3>
      <button
        type="button"
        onClick={() => {
          if (quantity === 0) return;
          setQuantity(quantity - 1);
        }}
      >
        -
      </button>
      {quantity}
      <button
        type="button"
        onClick={() => {
          if (quantity < movie.available) {
            setQuantity(quantity + 1);
          }
        }}
      >
        +
      </button>
    </from>

** As铆 resolv铆 el reto**

import React from "react";

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

  return (
    <form>
      <h3>{movies.name}</h3>
      <p>Disponible: {movies.avialable}</p>
      <button
        type="button"
        onClick={() => setQuantity(quantity - 1)}
        disabled={quantity === 0}
      >
        -
      </button>
      {quantity}
      <button
        type="button"
        onClick={() => setQuantity(quantity + 1)}
        disabled={quantity === movies.avialable}
      >
        +
      </button>
    </form>
  );
}

Respuesta al reto:

import React from 'react';
import Button from './Button';

export default function Form(props) {
  const [quantity, setQuantity] = React.useState(0); 
  const removeQuantity = () => {
    if (quantity <= 0){
      setQuantity(quantity)  
    } else {
      setQuantity(quantity - 1);
    };
  };
  const addQuantity = () => {
    setQuantity(quantity + 1);
  };

  return (
    <form>
      <p>驴Cu谩ntos boletos para {props.movie}?</p>
      <h4>Available: {props.available - quantity}</h4>
      <div>
        <Button
          text="-"
          power={removeQuantity}
          disabled={quantity === 0}
        />

        <span> {quantity} </span>

        <Button
          text="+"
          power={addQuantity}
          disabled={quantity >= props.available}
        />
      </div>
    </form>
  );
}

import React, { useState } from 鈥渞eact鈥;

export default function Form(props) {
const [counter, setCounter] = useState(0);
const { name } = props;
const { available } = props;

const sumCount = () => {
counter < available && setCounter((counter) => counter + 1);
};

const restCount = () => {
counter > 0 && setCounter((counter) => counter - 1);
};

return (
<form>
<h3>{name}</h3>
<button type=鈥渂utton鈥 onClick={restCount}>
-
</button>
<input type=鈥渘umber鈥 value={counter} />
<button type=鈥渂utton鈥 onClick={sumCount}>
+
</button>
</form>
);
}

Aqu铆 dejo mi soluci贸n al reto! 馃榿馃榿

import React from "react";

export default function Form({ movie }) {
  const [quantity, setQuantity] = React.useState(0);
  return (
    <form>
      <h3>{movie.name}</h3>
      <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>
  );
}

La soluci贸n del reto, me quedo as铆 :

import React from 'react';

function Form(props) {
  const { movie } = props;

  const [counter, setCounter] = React.useState(0)
  
  return (
    <form>
      <h3> {movie.name} </h3>
      <button   
        type='button' 
        onClick={()=> setCounter(counter - 1)}
        disabled={counter === 0}
        > - </button> 
      <span> {counter} </span>
      <button 
        type='button'
        onClick={()=> setCounter(counter + 1)}
        disabled={counter === movie.available}
      > + </button>
    </form>
  );
}

export default Form;

Queria hacer este project the forma local, asi que cree la misma estructura de archivos y copie las dependencias del package.json, sin embargo"

Hubo necesidad de usar el label 鈥搇egacy-peer-deps:

npm install --legacy--peer-deps

La aplicacion corrio as expected.

import React from "react";

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

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

<code> 

Reto:
Yo lo hice por instinto

import React from "react";

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

  return (
    <form>
      <h3>{movie.name}</h3>
      <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>
  );
}
import React from "react";

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

  return (
    <form>
      <h3>{movie.name}</h3>
      <button type="button" onClick={() => {
        setQuantity(quantity - 1)
      }} disabled={quantity <= 0}>-</button>
      {quantity}
      <button type="button" onClick={() => {
        setQuantity(quantity + 1)
      }} disabled={quantity > movie.abailable}>+</button>
    </form>
  );
}

Reto:

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

Hola yo encontre esta respuesta 鈥淧ara detener la recarga de la p谩gina al precionar un boton, simplemente especifique el tipo de bot贸n como 鈥榖ot贸n鈥. si no especifica el tipo de bot贸n, el navegador lo configurar谩 en 鈥榬establecer鈥 o 鈥榚nviar鈥 para que la p谩gina se vuelva a cargar.鈥 Espero que les sirva tanto como a mi.

Creo que React se acaba de volver mi librer铆a favorita, me encanta la parte que por lo que vi en el reto y en el ejemplo. Pr谩cticamente declaro la propiedad con la que voy a trabajar y con una funci贸n se modifican. Gracias por el reto!.

import React from "react";

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

  return (
    <form>
      <h3>{movie.name}</h3>
      <button
        type="button"
        onClick={() => setQuantity(quantity - 1)}
        disabled={quantity < 1}
      >
        {" "}
        -{" "}
      </button>
      {quantity}
      <button 
      type="button" 
      onClick={() => setQuantity(quantity + 1)}
      disabled= {movie.available == quantity}
      >
        {" "}
        +{" "}
      </button>
    </form>
  );
}

Este es mi ejercicio https://270ei.csb.app/

yo hice algo asi

import React from "react";

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

As铆 quedar铆a con el reto:

import React from "react";

export default function Form(props) {
  const { movie } = props;

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

  return (
    <form>
      <h3>{movie.name}</h3>
      <button
        type="button"
        onClick={() => setQuantity(quantity - 1)}
        disabled={quantity <= 0}
      >
        -
      </button>
      {quantity}
      <button
        type="button"
        onClick={() => setQuantity(quantity + 1)}
        disabled={quantity >= movie.avalible}
      >
        +
      </button>
    </form>
  );
}

Reto completado

import "./styles.css";

import React from 'react';

export default function App() {
  const [point, changePoint] = React.useState(0);
  return (
    <div className="App">
      <button onClick={() => changePoint(point+1)} > + </button>
      <button onClick={() => changePoint(point-1)}
        disabled={point===0}>  -</button>
      {
        <h1>{point}</h1>
      }
    </div>
  );
}

import React, {useState} from 鈥榬eact鈥

export default function Form ({ movie }) {
const [ count, useCount] = useState(0)
return (
<div>
<h1>{movie.nombre}</h1>
<h1>Sillas disponibles {movie.sillas}</h1>

<button type="button" onClick={() => useCount(count > 0 ? count - 1 : 0)}>-</button>
{
 count
}
<button type="button" onClick={() => useCount(count >= movie.sillas ? 0 : count +1 )}>+</button>
</div>

)

}

Bueno ya me siento poderoso jJAJAJ 鉂わ笍

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

Tambien pueden usar

<button onClick={() => setQuantity((prev) => prev + 1)}>  + </button>

// Prev es === a quantity

setQuantity((prev) => prev + 1)
     

Esta es la mejor forma de usar el estado anterior de quantity

Prev es el estado anterior

setQuantity(quantity + 1)

As铆 tambi茅n funciona pero con prev nos aseguramos de que sea el estado correcto al que nos referimos , sin problema de que pueda ocasionar bug o errores .

En este caso setQuantity tambien puede recibir una funcion con el valor previo, de esta manera:

setQuantity(prev => prev + 1)

Hello! This is my solution for the challenge, what do you think?

import React from "react";

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

  return (
    <form>
      <h3>{movie.name}</h3>
      <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>
  );
}

Hasta el momento, la mejor explicaci贸n para usar useState, la he visto en este curso, la ha explicado como me toco a mi propiamente investigar y deducir el funcionamiento de useState, esto para una persona que reci茅n esta conociendo los React Hooks

Esta fue la manera que se me ocurri贸 con un if ternario

<button
          disabled={quantity === 0 ? true : false}
          type="button"
          onClick={() => setQuantity(quantity - 1)}
        >
          -
        </button>
        <span> {quantity} </span>
        <button
          disabled={quantity === movie.availables ? true : false}
          type="button"
          onClick={() => setQuantity(quantity + 1)}
        >
          +
        </button>
import React from "react";

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

  return (
    <form>
      <h3>{movie.name}</h3>
      <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>
  );
}

yo complete el reto de esta forma:

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

Yo utilice los basicos if para realizar la validaci贸n de las cantidades:

import React from 'react';

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

Esto puede ser un poco basico pero capaz es util si el codigo no les funciona revisen de no haber puesto los numeros como strings si no como enteros (osea sin comillas 鈥溾)

const movies = [
  {
    name: "Avenger",
    avaliable: 5
  },
  {
    name: "Iron Man",
    avaliable: 5
  }
];

Es la primera vez que uso React. Me parece que este ejemplo es f谩cil de entender, pero extra帽o a la vez.

Aqu铆 les dejo mi codigo, lo hice de una forma diferente, porque no supe como hacerlo con disable, despu茅s continue con el video y ented铆 perfectamente, en fin espero que les sirva:

import React from "react";

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

  const { movie } = props;
    return (
      <form>
        <h2>{movie.name}</h2>
        <button
          type="button"
          onClick={() => setQuantity(quantity > 0 ? quantity - 1 : quantity)}
        > -
        </button>
        {quantity}
        <button onClick={() => setQuantity(
          quantity < movie.Available ? quantity + 1: quantity)}  type="button"> +
        </button>
      </form>
    );
}

Para aprender de React sigue la ruta:
https://platzi.com/desarrollo-react/

Mi soluci贸n: ```js export default function Form(props) { const { movie } = props; const [available, setAvailable] = useState(movie.available); const [disabled, setDisabled] = useState(false); const changeAvailable = (newAvailable) => { setAvailable(newAvailable); if (newAvailable === 0) { setDisabled(true); } else { setDisabled(false); } } const decreaseAvailable = () => { changeAvailable(available - 1); } const increaseAvailable = () => { changeAvailable(available + 1); } return ( <form>

{movie.name}

<button onClick={decreaseAvailable} type='button' disabled={disabled}> - </button>

{available}

<button onClick={increaseAvailable} type='button'> + </button> </form> ) } ```export default function Form(props) {聽 聽 const { movie } = props;聽 聽 const \[available, setAvailable] = useState(movie.available);聽 聽 const \[disabled, setDisabled] = useState(false); 聽 聽 const changeAvailable = (newAvailable) => {聽 聽 聽 聽 setAvailable(newAvailable);聽 聽 聽 聽 if (newAvailable === 0) {聽 聽 聽 聽 聽 聽 setDisabled(true);聽 聽 聽 聽 } else {聽 聽 聽 聽 聽 聽 setDisabled(false);聽 聽 聽 聽 }聽 聽 } 聽 聽 const decreaseAvailable = () => {聽 聽 聽 聽 changeAvailable(available - 1);聽 聽 } 聽 聽 const increaseAvailable = () => {聽 聽 聽 聽 changeAvailable(available + 1);聽 聽 } 聽 聽 return (聽 聽 聽 聽 \<form>聽 聽 聽 聽 聽 聽 \

{movie.name}\

聽 聽 聽 聽 聽 聽 \<button onClick={decreaseAvailable} type='button' disabled={disabled}> - \</button>聽 聽 聽 聽 聽 聽 \

{available} \

聽 聽 聽 聽 聽 聽 \<button onClick={increaseAvailable} type='button'> + \</button>聽 聽 聽 聽 \</form>聽 聽 )}

mi reto,

import React from "react";

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

  const {movie}=props;
  return(
    <form>
    <h3>{movie.name}</h3>
    <h3>Disponibles : {movie.available}</h3>
    <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>
  )
}

Comparto la soluci贸n de mi reto:

/*para el caso no menor a 0*/
disabled={(quantity===0)?true:false} 
/*para el caso no mayor al permitido*/
disabled={(quantity<=movie.available)?false:true}
import React, { useState } from "react";

export const Form = (props) => {
  const [state, setState] = useState(0);
  const { movie } = props;

  return (
    <form>
      <p>{movie.name}</p>
      <button
        type="button"
        onClick={() => setState(state - 1)}
        disabled={state === 0 ? true : false}
      >
        -
      </button>
      <span>{state}</span>
      <button
        type="button"
        onClick={() => setState(state + 1)}
        disabled={movie.available === state ? true : false}
      >
        +
      </button>
    </form>
  );
};