react-hook-formとyupを使ってみよう

import * as yup from 'yup';
import { useForm } from 'react-hook-form';
import { yupResolver } from '@hookform/resolvers/yup';

type FormValues = {
  name: string;
  email: string;
};

// バリデーション用のスキーマを定義する
const schema: yup.ObjectSchema<FormValues> = yup.object({
  name: yup.string().required('名前を入力してください'),
  email: yup.string().required('メールアドレスを入力してください').email('有効なメールアドレスを入力してください'),
});

export type Form = yup.InferType<typeof schema>;

const Contact = () => {
// react-hook-formのuseFormを使い、フォームに必要な関数や変数などを定義をする
// このuseFormの引数に上で定義をしたスキーマを渡してあげる
const { register, handleSubmit, formState: { errors } } = useForm({ resolver: yupResolver(schema) });
const onSubmit = (data: Form) => console.log(data);

return (
  <main>
    <div>お問い合わせ</div>
    <form onSubmit={handleSubmit(onSubmit)}>
      <div>
        <label htmlFor="email">Email</label>
        // inputタグに上で定義したregisterを展開してあげる。特にここで自分でonChangeやvalueなどを書いてあげる必要はない。
        <input id="email" {...register('email')} />
        // このerrorsにエラーの状態が入っている
        {errors?.email && <div>{errors.email.message}</div>}
      </div>
      <div>
        <label htmlFor="name">お名前</label>
        <input id="name" {...register('name')} />
        {errors?.name && <div>{errors.name.message}</div>}
      </div>
      <button type="submit">送信</button>
    </form>
  </main>
)
}

export default Contact;