Using preventDefault with a custom hook in react

user_11755819 0
Viewed 6955

I am a beginner React developer. I am trying to enhance a forms tutorial I did using hooks. I refactored the code so that the inputs and button are each a separate component. I have also refactored the hooks so that each hook is in a separate file. The problem that I am running into is the handleSubmit method in the useSubmitted custom hook (hooks/useSubmitted.js) file. I keep getting the error TypeError: event.preventDefault is not a function. I have tried to fix it and also looked for a solution in Google, but to no avail.

Here is the link

Any help would be appreciated it.

Thanks

react-hooks reactjs
4 Answers

handleSubmit need parameter with type event and you give it submitted which has type boolean. You can get type event.preventDefault() from

<form onSubmit={handleSubmit} />

or

<form onSubmit={(event) => handleSubmit(event)} />
user_95504000

pass handleSubmit function to the form as onsubmit

<form onSubmit={handleSubmit}>
user_126564480

There were a few problems:

  1. You were calling the handleSubmit function inside the JSX. It's a hook, so it's called inside the body function and you then have access to the returned values there
  2. You were using the validity hook in App.js, but in reality you use that inside the submitted one, since it shouild only submit if it's valid. So you don't need it in App.js
  3. You closed the <form/> early, so there was a syntax error

Have a look at the changes in this sandbox, specifically the ones inside App.js. Should have the necessary fixes.

As a side note, the way these hooks are laid out doesn't quite make sense. The validity and the submission of the form should be together, as they are co-dependent. Having separate hooks doesn't quite make sense. The form values dictate the validity, and the validity determines the ability to submit.

user_54968080

I am just wonder why you use preventDefault function. Following your code, the parameter named event in handleSubmit function is same as submitted state in useSubmitted function component. It seems that you have misunderstanding about preventDefault function and the usage.

Please refer this article. https://github.com/ankeetmaini/simple-forms-react

user_126663570
Related