Roger Chi

React error: "Form submission canceled because the form is not connected"

category: Web development
2019-09-26
React

I came across an error when I tried to submit a form built with React: "Form submission canceled because the form is not connected".

After a little digging, this stackoverflow answer provided necessary tips which solved my problem.

  1. make sure all buttons in the form that do not submit the form have a type="button".
  2. the form still has to render in the DOM after it’s clicked.

And if you don’t want the page to refresh after submission, don’t set the form’s onSubmit prop, set the submit button to type="button" and handle the submission in the button’s onClick.