TypeError: e.preventDefault is not a function in react-CodePudding

**What my code is doing : **

When sendprops value is signup show signup page with rendering email and confirm password component and send request to signup api and same goes for login

Actually I am newbie in React and just started to make a tiny project that is login and signup

my code :

const Form = ({ sendprop }) => {
  const [formValue, setFormValue] = useState({
    name: "",
    email: "",
    password: "",
    confirmPassword: "",
  });
function onFormChange(e) {
    console.log("target : " e.target.value);
    setFormValue({ ...formValue, [e.target.name]: e.target.value });
    console.log(formValue);
  }

  // const chooseFormMethod=(prop)=>{
  //   if(prop==="signup"){
  //       handleSubmit  
  //   }
  // }
  const handleSubmit=async(e,prop)=>{
    e.preventDefault();
    if(prop==="signup"){
      console.log("in handleSubmit")
      if(formValue.password===formValue.confirmPassword){
          console.log("in if")
          const res=await axios.post('http://localhost:8000/signup',{
              ...formValue
          })
          console.log(res);
      }
    }
    else{
      const {email,password}=formValue
      const body={
        email:email,
        password:password
      }
      const res= await axios.post('http://localhost:8000/login',body);
      console.log(res);
    }
  }
;
  return (
    <>
        <form onSubmit={handleSubmit(sendprop)}>
        <div id="input-div">
          {sendprop === "signup" ? <NameInput passState={{formValue,setFormValue}}/> : " "}
          <input
            type={"email"}
            placeholder="E m a i l  A d d r e s s"
            id="email-input"
            className="form-input"
            name="email"
            onChange={onFormChange}
            value={formValue.email}
          />
          <div id="border" className="border-div" />
          <input
            type={"password"}
            placeholder="P a s s w o r d"
            id="password-input"
            className="form-input"
            name="password"
            onChange={onFormChange}
            value={formValue.password}
          />
          <div id="border" className="border-div" />
          {sendprop === "signup" ? <ConfirmPassword passState={{formValue,setFormValue}}/> : " "}
        </div>
        <div id="submit-btn-div">
          <button type={"submit"} id="submit-btn">
            S U B M I T
          </button>
        </div>
        {sendprop === "signup" ? <LoginAccount /> : " "}
        {sendprop !== "signup" ? <CreateAccount /> : " "}
      </form>
    </>
  );
};
export default Form;

Warning and Error :

value :  login
FormHeader.js:5 form header login
react-dom.development.js:86 Warning: Expected `onSubmit` listener to be a function, instead got a value of `object` type.
    at form
    at Form (http://localhost:3000/static/js/bundle.js:250:5)
    at div
    at div
    at div
    at Mainbox (http://localhost:3000/static/js/bundle.js:120:5)
    at App (http://localhost:3000/static/js/bundle.js:35:76)
printWarning @ react-dom.development.js:86
error @ react-dom.development.js:60
warnForInvalidEventListener @ react-dom.development.js:9592
setInitialDOMProperties @ react-dom.development.js:9712
setInitialProperties @ react-dom.development.js:9921
finalizeInitialChildren @ react-dom.development.js:10950
completeWork @ react-dom.development.js:22193
completeUnitOfWork @ react-dom.development.js:26596
performUnitOfWork @ react-dom.development.js:26568
workLoopSync @ react-dom.development.js:26466
renderRootSync @ react-dom.development.js:26434
performSyncWorkOnRoot @ react-dom.development.js:26085
flushSyncCallbacks @ react-dom.development.js:12042
flushSync @ react-dom.development.js:26201
legacyCreateRootFromDOMContainer @ react-dom.development.js:29575
legacyRenderSubtreeIntoContainer @ react-dom.development.js:29601
render @ react-dom.development.js:29685
./src/index.js @ index.js:6
options.factory @ react refresh:6
__webpack_require__ @ bootstrap:24
(anonymous) @ startup:7
(anonymous) @ startup:7
Mainbox.js:12 value :  signup
FormHeader.js:5 form header signup
react-dom.development.js:86 Warning: Expected `onSubmit` listener to be a function, instead got a value of `object` type.
    at form
    at Form (http://localhost:3000/static/js/bundle.js:250:5)
    at div
    at div
    at div
    at Mainbox (http://localhost:3000/static/js/bundle.js:120:5)
    at App (http://localhost:3000/static/js/bundle.js:35:76)
printWarning @ react-dom.development.js:86
error @ react-dom.development.js:60
warnForInvalidEventListener @ react-dom.development.js:9592
diffProperties @ react-dom.development.js:10100
prepareUpdate @ react-dom.development.js:10977
updateHostComponent$1 @ react-dom.development.js:21786
completeWork @ react-dom.development.js:22155
completeUnitOfWork @ react-dom.development.js:26596
performUnitOfWork @ react-dom.development.js:26568
workLoopSync @ react-dom.development.js:26466
renderRootSync @ react-dom.development.js:26434
performSyncWorkOnRoot @ react-dom.development.js:26085
flushSyncCallbacks @ react-dom.development.js:12042
flushPassiveEffectsImpl @ react-dom.development.js:27060
flushPassiveEffects @ react-dom.development.js:26984
(anonymous) @ react-dom.development.js:26769
workLoop @ scheduler.development.js:266
flushWork @ scheduler.development.js:239
performWorkUntilDeadline @ scheduler.development.js:533
Form.js:28 Uncaught (in promise) TypeError: e.preventDefault is not a function
    at handleSubmit (Form.js:28:1)
    at Form (Form.js:52:1)
    at renderWithHooks (react-dom.development.js:16305:1)
    at mountIndeterminateComponent (react-dom.development.js:20074:1)
    at beginWork (react-dom.development.js:21587:1)
    at beginWork$1 (react-dom.development.js:27426:1)
    at performUnitOfWork (react-dom.development.js:26557:1)
    at workLoopSync (react-dom.development.js:26466:1)
    at renderRootSync (react-dom.development.js:26434:1)
    at performSyncWorkOnRoot (react-dom.development.js:26085:1)
handleSubmit @ Form.js:28
Form @ Form.js:52
renderWithHooks @ react-dom.development.js:16305
mountIndeterminateComponent @ react-dom.development.js:20074
beginWork @ react-dom.development.js:21587
beginWork$1 @ react-dom.development.js:27426
performUnitOfWork @ react-dom.development.js:26557
workLoopSync @ react-dom.development.js:26466
renderRootSync @ react-dom.development.js:26434
performSyncWorkOnRoot @ react-dom.development.js:26085
flushSyncCallbacks @ react-dom.development.js:12042
flushSync @ react-dom.development.js:26201
legacyCreateRootFromDOMContainer @ react-dom.development.js:29575
legacyRenderSubtreeIntoContainer @ react-dom.development.js:29601
render @ react-dom.development.js:29685
./src/index.js @ index.js:6
options.factory @ react refresh:6
__webpack_require__ @ bootstrap:24
(anonymous) @ startup:7
(anonymous) @ startup:7
Form.js:28 Uncaught (in promise) TypeError: e.preventDefault is not a function
    at handleSubmit (Form.js:28:1)
    at Form (Form.js:52:1)
    at renderWithHooks (react-dom.development.js:16305:1)
    at updateFunctionComponent (react-dom.development.js:19588:1)
    at beginWork (react-dom.development.js:21601:1)
    at beginWork$1 (react-dom.development.js:27426:1)
    at performUnitOfWork (react-dom.development.js:26557:1)
    at workLoopSync (react-dom.development.js:26466:1)
    at renderRootSync (react-dom.development.js:26434:1)

CodePudding user response：

<form onSubmit={handleSubmit(sendprop)}> should be <form onSubmit={(e) => handleSubmit(e, sendprop)}>

The event handlers in react are expecting a function, not a function call like in HTML. When you do handleSubmit(sendprop), you're calling the function and setting the return value as the event handler, In your case, undefined.

Also, in your function definition, you're expecting two arguments, where the first one is the event object, you missed passing it to handleSubmit.

CodePudding user response：

First, you call the method in wrong way. If you need to send any arguments you should using arrow function.

<form onSubmit={ () => handleSubmit(sendprop) }>

Because if you just call <form onSubmit={handleSubmit(sendprop)}> it will directly called/executed the method in first render not on submit event.

Second, if you need to send the event you need to pass it on your arrow function.

<form onSubmit={ (e) => handleSubmit(e, sendprop) }>

And you handleSubmit accept 2 arguments but you send only one. You need to aware about it.

CodePudding user response：

handleSubmit(e,sendprop)}

and then

const handleSubmit=async(e,prop)=>{ e.preventDefault(); ...... .......

}