TypeError: a.preventDefault is not a function

I’m trying to register auth with firebase using the name, email and password, but when I tried to register with that info then give me an error, like this:

TypeError: a.preventDefault is not a function

  11 |  const dispatch = useDispatch();
  12 | 
  13 |  const loginToDo = (a) => {
> 14 |    a.preventDefault();
     | ^  15 |  };
  16 | 
  17 |  const register = () => {

I’m sure my firebase connect is ok, because before I have save post data from this project,

so, I have tried code like this way:

import React, { useState } from "react";
import { auth } from "./firebase";
import "./Login.css";
import { useDispatch } from "react-redux";

const Login = () => {
  const [email, setEmail] = useState("");
  const [password, setPassword] = useState("");
  const [name, setName] = useState("");
  const [profile, setProfile] = useState("");
  const dispatch = useDispatch();

  const loginToDo = (a) => {
    a.preventDefault();
  };

  const register = () => {
    if (!name) {
      return alert("Please enter a name");
    }
    auth
      .createUserWithEmailAndPassword(email, password)
      .then((userAuth) => {
        userAuth.user
          .updateProfile({
            displayName: name,
            photoURL: profile,
          })
          .then(() => {
            dispatch(
              loginToDo({
                email: userAuth.user.mail,
                uid: userAuth.user.uid,
                displayName: name,
                photoURL: profile,
              })
            );
          });
      })
      .catch((error) => alert(error));
  };

  return (
    <div className="login">
      <h2>
        Please signUp or <br /> Login your account
      </h2>

      <form>
        <input
          value={name}
          onChange={(e) => setName(e.target.value)}
          type="text"
          placeholder="Full name"
        />
        <input
          value={profile}
          onChange={(e) => setProfile(e.target.value)}
          type="text"
          placeholder="Profile pic URL (optional)"
        />
        <input
          value={email}
          onChange={(e) => setEmail(e.target.value)}
          type="text"
          placeholder="Email"
        />
        <input
          value={password}
          onChange={(e) => setPassword(e.target.value)}
          type="password"
          placeholder="Password"
        />
        <button type="submit" onClick={loginToDo}>
          SignIn
        </button>
      </form>

      <p style={{ marginTop: "10px" }}>
        Not a member ?{" "}
        <span className="login__register" onClick={register}>
          Register Now
        </span>
      </p>
    </div>
  );
};

export default Login;

Any suggestion please!

Answer

A few things are somehow confusing in your code:

After Login:

    <button type="submit" onClick={loginToDo}>
      SignIn
    </button>

function loginToDo will be called:

    const loginToDo = (a) => {
    a.preventDefault();
  };

the page won’t refresh and that’s it. you haven’t defined anything to happen after that.

In Signup

you call register function, inside, it dispatches this action:

 dispatch(
          loginToDo({
            email: userAuth.user.mail,
            uid: userAuth.user.uid,
            displayName: name,
            photoURL: profile,
          })

loginToDo, as you defined just prevents page from refresh, it has nothing to do with your dispatch and actions. (also this is where the error comes from)

dispatch takes an object as argument, which usually has two properties: type and payload.

    const action={
                   type:"registerUser"  // the type depends on how you designed your reducer.
                   payload:userData // email, name, ...
                 }
    dispatch(action)

sometimes people define actionCreators, that has the type itself, and only takes the payload:

const registerActionCreator=(payload)=>({type:"registerUser",payload:payload}) 

so alternatively you can use:

   dispatch(registerActionCreator(userData))