I'm trying to implement a toggle function to users sign in and sign up with two buttons (button 1, button 2). Problem is that regardless of which button I click it executes the toggle function. It seems one button click executes both onclick functions.

import React, { useEffect, useState } from "react";
import LockIcon from "@mui/icons-material/Lock";
import VisibilityIcon from "@mui/icons-material/Visibility";
import { GoogleLogin } from "@react-oauth/google";
import jwt_decode from "jwt-decode";
import { useDispatch } from "react-redux";
import { useNavigate } from "react-router-dom";
import "./authStyles.css";
import { signUp, signIn } from "../../action/auth/authAction";

const initialStateForm = {
    fName: "",
    lName: "",
    email: "",
    password: "",
    confirmPassword: "",
};

const Auth = () => {
    const [showPassword, setShowPassword] = useState(true);
    const [isSignup, setIsSignup] = useState(false);
    const [formData, setFormData] = useState(initialStateForm);
    const dispatch = useDispatch();
    const navigate = useNavigate();
    const switchMode = () => {
        setIsSignup((prevIsSignup) => !prevIsSignup);
        setShowPassword(false);
        console.log("switchMode "   isSignup);
    };

    const handleSubmit = (e) => {
        e.preventDefault();
        console.log("handleSubmit "   isSignup);
        // if (isSignup) {
        //  dispatch(signUp(formData));
        // } else {
        //  dispatch(signIn(formData));
        // }
    };

    const handleChnage = (e) => {
        e.preventDefault();
        setFormData({ ...formData, [e.target.name]: e.target.value });
    };

    const handleShowPassword = () => {
        setShowPassword((prevShowPassword) => !prevShowPassword);
    };

    const googleSuccess = async (res) => {
        const decodeUser = jwt_decode(res.credential);
        dispatch({ type: "AUTH", payload: decodeUser });
        navigate("/");
    };
    const googleFailure = (error) => {
        console.log(error);
        console.log("Google sign in is unsuccessfull");
    };

    return (
        <div>
            <div className="sign-form-container">
                <LockIcon></LockIcon>
                <span>{isSignup ? `Sign Up` : `Sign In`}</span>
                {isSignup && (
                    <>
                        <input
                            type="text"
                            id="fName"
                            name="fName"
                            placeholder="First Name"
                            onChange={handleChnage}
                        />
                        <input
                            type="text"
                            id="lName"
                            name="lName"
                            placeholder="Last Name"
                            onChange={handleChnage}
                        />
                    </>
                )}
                <input
                    type="email"
                    id="email"
                    name="email"
                    placeholder="Email"
                    onChange={handleChnage}
                />
                <input
                    type={showPassword ? `password` : `text`}
                    id="password"
                    name="password"
                    placeholder="Password"
                    onChange={handleChnage}
                />
                <VisibilityIcon onClick={handleShowPassword} />
                {isSignup && (
                    <>
                        <input
                            type="password"
                            id="confirmPassword"
                            name="confirmPassword"
                            placeholder="Confirm password"
                            onChange={handleChnage}
                        />
                    </>
                )}
                <GoogleLogin
                    onSuccess={googleSuccess}
                    onFailure={googleFailure}
                    cookiePolicy="single_host_origin"
                ></GoogleLogin>
                <button type="button" onClick={handleSubmit}> //button 1
                    {isSignup ? `Sign Up` : `Sign In`}
                </button>
                <button type="button" onClick={switchMode}> // button 2
                    {isSignup
                        ? "Already have an account ? Sign In"
                        : "Don't have and account? Sign Up"}
                </button>
            </div>
        </div>
    );
};

export default Auth;

One button needs to execute the respective function only. Not both functions. How to avoid this problem?

CodePudding user response：

Try to nest the elements into a form and declare the first button as type=submit:

return (
  <div>
    <form className='sign-form-container' onSubmit={handleSubmit}>
      ...
      <button type='submit'>
        {isSignup ? `Sign Up` : `Sign In`}
      </button>
      <button type='button' onClick={switchMode}>
        {isSignup
          ? 'Already have an account ? Sign In'
          : "Don't have and account? Sign Up"}
      </button>
    </form>
  </div>
);