投稿日 :
更新日 :
ユーザー名とメールアドレスを入力し、ユーザー登録するボタンをクリックしてください。
これまでのフォームは入力項目が一つでしたが、今回は二つ存在します。項目が一つなら単純にuseStateで状態管理できますが、項目が増えるにつれ、それぞれを個別のstateで管理しようとすると思ったよりもコードが複雑になります。
今回は項目が二つだけのため、項目それぞれの状態をフィールドにしたオブジェクトで状態管理しています。二つでも結構大変なため、数が多くなってきたらReact Hook Formなどのライブラリーの力を借りた方がよさそうです。
テストコードはこちらです。
テストケースが15個になってしまったため、ここでの説明は割愛します。テストを大きく分類すると、
という風になります。