how to reset the form and enable submit button after form submision (react-formio)?

Question

I am using the react-formio package to generate a form dynamically.

I have generated a simple login-form using this link: https://codesandbox.io/s/cra-react-formio-iy8l

Answer 1

You can try to use the submission property of the <Form /> component.

As per docs..

Submission data to fill the form. You can either load a previous submission or create a submission with some pre-filled data. If you do not provide a submissions the form will initialize an empty submission using default values from the form.

So in this case you can control the component in a parent component.

Here submissionData is a parent component state and the component initializes with the state from parent (Empty values initially).

<Form submission={{ data: submissionData }} />

Now, inside the onSubmit handler you can try to reset the state and force a re-render.

    onSubmit={() => {
         // Reset submission data
          setSubmissionData({});
        };
      }

Complete code would look like below.

export default () => {
  const [submissionData, setSubmissionData] = useState({});
  return (
    <Form
      //all form props
      submission={{ data: submissionData }}
      onSubmit={() => {
        var promise1 = new Promise(function(resolve, reject) {
          setTimeout(function() {
            resolve("foo");
          }, 300);
        });

        promise1.then(function(value) {
          alert(value);
         // Reset submission data
          setSubmissionData({});
        });
      }}
    />
  }

Attached codesandbox link as comment.