19. React Hook Form

import { useForm } from 'react-hook-form';

function RegisterForm() {
  const {
    register,
    handleSubmit,
    watch,
    formState: { errors, isSubmitting },
  } = useForm();

  const password = watch('password');  // Obserwuj hasło dla potwierdzenia

  const onSubmit = async (data) => {
    await createUser(data);
    console.log('Zarejestrowano:', data);
  };

  return (
    <form onSubmit={handleSubmit(onSubmit)}>
      <div>
        <input
          {...register('email', {
            required: 'Email jest wymagany',
            pattern: { value: /^\S+@\S+\.\S+$/, message: 'Niepoprawny email' }
          })}
          placeholder="Email"
        />
        {errors.email && <span>{errors.email.message}</span>}
      </div>

      <div>
        <input
          type="password"
          {...register('password', {
            required: 'Hasło jest wymagane',
            minLength: { value: 8, message: 'Min. 8 znaków' }
          })}
          placeholder="Hasło"
        />
        {errors.password && <span>{errors.password.message}</span>}
      </div>

      <div>
        <input
          type="password"
          {...register('confirmPassword', {
            required: 'Potwierdź hasło',
            validate: value => value === password || 'Hasła nie są takie same'
          })}
          placeholder="Potwierdź hasło"
        />
        {errors.confirmPassword && <span>{errors.confirmPassword.message}</span>}
      </div>

      <button type="submit" disabled={isSubmitting}>
        {isSubmitting ? 'Rejestrowanie...' : 'Zarejestruj'}
      </button>
    </form>
  );
}