fix: form field isn't controlled

compsci-adl · Feb 16, 2024 · c50f138 · c50f138
1 parent 8922437
commit c50f138
Show file tree

Hide file tree

Showing 2 changed files with 4 additions and 13 deletions.
diff --git a/src/app/(account)/join/steps/StepTwo.tsx b/src/app/(account)/join/steps/StepTwo.tsx
@@ -44,17 +44,10 @@ export default function StepTwo() {
     });
 
     const { user } = useUser();
-    // Fetch user's profile information on component mount
     useEffect(() => {
-        // Check if user profile data exists
-        if (user && user.primaryEmailAddress && user.fullName) {
-            // Split the full name into first and last names
-            const [firstName, lastName] = user.fullName.split(' ');
-            // Set the first and last names in the state
-            form.setValue('firstName', firstName);
-            form.setValue('lastName', lastName);
-        }
-        // eslint-disable-next-line react-hooks/exhaustive-deps
+        if (!user) return;
+        form.setValue('firstName', String(user.firstName));
+        form.setValue('lastName', String(user.lastName));
     }, [user]);
 
     const { nextStep } = useJoinUsStep();

diff --git a/src/components/Field.tsx b/src/components/Field.tsx
@@ -10,7 +10,6 @@ export interface FieldProps {
     type?: 'text' | 'password' | 'select' | 'checkbox';
     options?: readonly string[] | string[];
     placeholder?: string;
-    defaultValue?: string;
 }
 
 const Field = ({
@@ -21,7 +20,6 @@ const Field = ({
     type = 'text',
     options = [],
     placeholder,
-    defaultValue,
 }: FieldProps) => {
     const [showPassword, setShowPassword] = useState(false);
 
@@ -71,7 +69,7 @@ const Field = ({
                         id={label.toLowerCase()}
                         name={label.toLowerCase()}
                         type={showPassword ? 'text' : type}
-                        defaultValue={defaultValue}
+                        value={value}
                         className="mt-1 w-full rounded-none border border-gray-300 px-3 py-2 text-grey"
                     />
                     {type === 'password' && (