The function createUserWithEmailAndPassword is not being called within SignUpUser function when onClick event happening. But when I do onClick={signUpUser(email,password)} it works

import React from 'react';
    import styled from 'styled-components';
    import { useState } from 'react';
    import { signUpUser } from '../firebase';
    
    function SignUpComponent() {
        const [email, setEmail] = useState('');
        const [password, setPassword] = useState('');
        return (
            <AuthForm>
                <input type="text" 
                placeholder="Email" 
                name="email"
                value={email}
                onChange={(e) => setEmail(e.target.value)}/>
                <input type="password" 
                name="password"
                placeholder="password" 
                value={password}
                onChange={(e) => setPassword(e.target.value)}/>
                <SubmitFormButton
                type="submit"  
                onClick={() => signUpUser(email,password)}
                >
                Sign Up
                </SubmitFormButton>
            </AuthForm>
        )
    };
    
`Here is my firebase.js file`

    import { initializeApp } from "firebase/app";
    
    import {
        getAuth,
        onAuthStateChanged,
        signInWithPopup,
        signOut,
        createUserWithEmailAndPassword,
        signInWithEmailAndPassword,
      } from 'firebase/auth';
    
    const firebaseConfig = {
        apiKey: ****,
        authDomain: "***",
        projectId: "***",
        storageBucket: "***",
        messagingSenderId: "***",
        appId: "***"
    };
    
      // Initialize Firebase
    const app = initializeApp(firebaseConfig);
    export const auth = getAuth();
    auth.useDeviceLanguage();
    
    // Auth functions
    
    export function signUpUser(email, password) {
    
        if (password.length < 6) {
              alert('Password is too short');
              return;
        };
    
      ˚˚createUserWithEmailAndPassword(auth, email, password)
        .then((userCredential) => {
          const user = userCredential.user;
          alert('Signed up Successfully', user);
          })
          .catch((error) => {
          const errorCode = error.code;
          const errorMessage = error.message;
          alert(errorMessage);
          });
    };

CodePudding user response：

onClick={signUpUser(email,password)} Here the signUpUser is called during a render, no matter if clicked or not.

If it works that way and does not work with onClick={() => signUpUser(email,password)} then there are no other options but your SubmitFormButton does not trigger onClick. Maybe it is not passed to the DOM at all.