Not uncommon to see folks add form submit handlers on the submit buttons click event vs on the forms submit handler. The problem is this prevents users from being able to fill out the form and submit it solely from the keyboard.
<form>
<button onClick={handleSubmit} />
</form>
Instead, apply the handleSubmit
function to the form onSubmit
handler. This ensures the form can be submitted when the user hits the return key.
<form onSubmit={handleSubmit}>
<button type="submit" />
</form>
If for whatever reason your button needs to live outside of the form element, likely in a dialog situation, you can ensure the same functionality by passing the forms id to the button via the form
attribute as shown below.
<form id="contactForm" onSubmit={handleSubmit}>
</form>
<button form="contactForm" type="submit" />