Merge pull request #94 from mehul-m-prajapati/html_warn

Remove nested <form> element
daccotta-org · Oct 18, 2024 · fe290e8 · fe290e8
2 parents 344109b + 9d3bd52
commit fe290e8
Showing 1 changed file with 24 additions and 27 deletions.
diff --git a/client/src/pages/Onboard/(components)/UsernameAndPictures.tsx b/client/src/pages/Onboard/(components)/UsernameAndPictures.tsx
@@ -16,8 +16,7 @@ const UsernameAndAvatar: React.FC<UsernameAndAvatarProps> = ({ onNext }) => {
         setValue("profile_image", avatars[index].profile)
     }
 
-    const handleSubmit = (e: React.FormEvent) => {
-        e.preventDefault()
+    const handleNext = () => {
         if (profileUrl !== "") {
             onNext()
         }
@@ -28,31 +27,29 @@ const UsernameAndAvatar: React.FC<UsernameAndAvatarProps> = ({ onNext }) => {
             <div className="lg:col-span-2 h-screen flex flex-col items-center justify-center py-12 px-4 sm:px-6 lg:px-8 bg-black text-white">
                 <div className="max-w-md w-full space-y-8">
                     <h2 className="mt-6 text-center text-3xl font-extrabold">Choose an Avatar</h2>
-                    <form onSubmit={handleSubmit} className="mt-8 space-y-6">
-                        <div className="grid grid-cols-3 gap-4">
-                            {avatars.map((avatar, index) => (
-                                <img
-                                    key={avatar.id}
-                                    src={avatar.profile}
-                                    alt={`Avatar ${index + 1}`}
-                                    className={`w-full h-auto cursor-pointer transition-transform duration-200 ease-in-out hover:scale-105 rounded-lg ${
-                                        selectedAvatarIndex === index ? "ring-2 ring-offset-2 ring-white" : ""
-                                    }`}
-                                    onClick={() => handleAvatarSelect(index)}
-                                />
-                            ))}
-                        </div>
-                        <div>
-                            <button
-                                type="submit"
-                                className="w-full flex justify-center py-2 px-4 border border-transparent rounded-md shadow-sm text-sm font-medium text-white bg-gray-800 hover:bg-gray-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-gray-500"
-                                disabled={!profileUrl}
-                                onClick={handleSubmit}
-                            >
-                                Next
-                            </button>
-                        </div>
-                    </form>
+                    <div className="grid grid-cols-3 gap-4">
+                        {avatars.map((avatar, index) => (
+                            <img
+                                key={avatar.id}
+                                src={avatar.profile}
+                                alt={`Avatar ${index + 1}`}
+                                className={`w-full h-auto cursor-pointer transition-transform duration-200 ease-in-out hover:scale-105 rounded-lg ${
+                                    selectedAvatarIndex === index ? "ring-2 ring-offset-2 ring-white" : ""
+                                }`}
+                                onClick={() => handleAvatarSelect(index)}
+                            />
+                        ))}
+                    </div>
+                    <div>
+                        <button
+                            type="button" // Change to button type
+                            className="w-full flex justify-center py-2 px-4 border border-transparent rounded-md shadow-sm text-sm font-medium text-white bg-gray-800 hover:bg-gray-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-gray-500"
+                            disabled={!profileUrl}
+                            onClick={handleNext} // Use the new handler
+                        >
+                            Next
+                        </button>
+                    </div>
                 </div>
             </div>
             <div className="hidden lg:flex lg:col-span-3 bg-[#FF204E] items-center justify-center">