react-query で取得した値でセレクトボックスを出すところまで実装

1 files changed, 8 insertions, 10 deletions

diff --git a/src/SignUpForm2.tsx b/src/SignUpForm2.tsx
index f355225..177373d 100644
--- a/src/SignUpForm2.tsx
+++ b/src/SignUpForm2.tsx
@@ -2,14 +2,14 @@ import './SignUp.css'
 import { useForm } from 'react-hook-form'
 import { zodResolver } from "@hookform/resolvers/zod"
 import { useLocation, Navigate, useNavigate } from 'react-router-dom';
-import { Form1, Form2, form2Schema } from './signUpSchema'
+import { Form1Data, Form2Data, form2Schema } from './signUpSchema'
 
 export const SignUpForm2 = () => {
-  const { register, handleSubmit, formState: { errors } } = useForm<Form2>({
+  const { register, handleSubmit, formState: { errors } } = useForm<Form2Data>({
     resolver: zodResolver(form2Schema),
   });
   const location = useLocation();
-  const form1 = location.state as Form1 | null;
+  const form1 = location.state as Form1Data | null;
   const navigate = useNavigate();
 
   // form1 のデータがない場合は form1 にリダイレクトする
@@ -17,13 +17,11 @@ export const SignUpForm2 = () => {
     return <Navigate replace to="/sign-up/form1" />
   }
 
-  const onsubmit = (form2: Form2) => {
-    const state = {
-      ...form1,
-      ...form2,
-    }
-    navigate('/sign-up/confirm', { state })
+  const onsubmit = (form2: Form2Data) => {
+    const state = { form1, form2 }
+    navigate('/sign-up/form3', { state })
   }
+
   const onerror = (err: any) => console.log(err);
 
   return (
@@ -41,7 +39,7 @@ export const SignUpForm2 = () => {
           <div className="error">{errors.password?.message}</div>
         </div>
         <div>
-          <button type="submit">確認画面へ</button>
+          <button type="submit">次へ</button>
         </div>
       </form>
     </>