3

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

Improve this question
2
  • It's a little unclear what you are trying to do. You return a handleSubmit function that takes (presumably) a form's submit event object, but then pass it a boolean value immediately in your app code, handleSubmit(submitted). Boolean values won't have a preventDefault property on them. Commented Oct 6, 2020 at 2:32
  • Sorry, I was tinkering around using different ways to fix the preventDefault issue. Commented Oct 6, 2020 at 2:56

4 Answers 4

Reset to default
3

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)} />
Improve this answer
Sign up to request clarification or add additional context in comments.

Comments

1

pass handleSubmit function to the form as onsubmit

<form onSubmit={handleSubmit}>
Improve this answer

Comments

0

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.

Improve this answer

6 Comments

I have looked at your code, it was very helpful. Yes, you are correct regarding the link between validity and submitting. Thank you. The problem now is with the onSubmit call. When I click the button, it doesn't do anything. When I did the tutorial, everything was in the App.js file (which is not good code wise) and clicking the button worked. Now it doesn't. There are no error s outputted in the link to the changes you posted on here. Any suggestions? Thanks
Did you change the type of the Button component? In your original sandbox, you had <Button ... type='button' />. You need to have <Button type='submit' ... />. You can check that in my sandbox too
Hi, yes I checked your sandbox for that too. I discovered what the problem is. The problem is that in the if condition in the handleSubmit method in the hooks/useSubmitted.js file. The hook does not receive any of the user inputted values for the values object and therefore the if condition is never true. Any suggestions for that one? Sorry. Thanks for your help once again.
Yes, the reason is because every single use of a hook is independent of all others. So when you do useFormValues, the values between each of those hook usages are separate from each other. So the values hook inside App.js is getting the new values as you type, but the values hook inside useSubmitted isn't changing at all. This comes back to the point in the last paragraph of my answer: separating the values, validity and submission in a form to separate hooks doesn't really make sense, since they're all codependent.
That's why if you use form libraries like formik or react-hook-form, you'll see that there's a single context hook that gives you back ALL the form info, including the form values, the helper functions to set those values, the validity of the form, the submission count, and so on.
|
0

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

Improve this answer

Comments

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.