Creando la lógica del componente login

En este video se está utilizando el componente de Tailwind UI:
https://tailwindui.com/components/application-ui/forms/sign-in-forms

Pueden corregir el error reemplazando los tags

<Form></Form> por <form></form> y <Field/> por <input/>

Saludos!

Si usan typescript:

  const emailRef = useRef<HTMLInputElement>(null);
  const passwordRef = useRef<HTMLInputElement>(null);

  const submitHandle = (event: React.FormEvent) => {
    event.preventDefault();
    const email = emailRef.current?.value;
    const password = passwordRef.current?.value;
    console.log({ email, password });
  };

Una solución hasta que se encuentre de donde provienen los componentes Form y Field (En el repositorio de gitHub del enlace no aparece el import de dichos componentes)

es cambiarlos por un “<form>” y por un “<input>” respectivamente, de puro html.

<form className='mt-8 space-y-6' action='#' method='POST'>

<input
                  id='email-address'
                  name='email'
                  type='email'
                  autoComplete='email'
                  required
                  className='appearance-none rounded-none relative block w-full px-3 py-2 border border-gray-300 placeholder-gray-500 text-gray-900 rounded-t-md focus:outline-none focus:ring-indigo-500 focus:border-indigo-500 focus:z-10 sm:text-sm'
                  placeholder='Email address'
                />

y el resultado es similar para poder continuar el curso

En caso de que estén utilizando Mui con TextField en lugar de utilizar “ref” pueden usar “inputRef”

Me empieza a cansar que cada 5 minutos dice: “valores que van a ser clave”… Jaja