Manejo del estado en React

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 🤯

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

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í “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?

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 😄

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 “react”;

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=“button” onClick={restCount}>
-
</button>
<input type=“number” value={counter} />
<button type=“button” 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 –legacy-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 “Para detener la recarga de la página al precionar un boton, simplemente especifique el tipo de botón como ‘botón’. si no especifica el tipo de botón, el navegador lo configurará en ‘restablecer’ o ‘enviar’ 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 ‘react’

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/

{movie.name}\

{movie.name}

{movie.name}

{available}

{movie.name}\

{available} \

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