Why onSubmit is a required prop?

[pierroberto]

Hi,

Is there a way to avoid using onSubmit as prop of Formik component?

I get the following error:

Property 'onSubmit' is missing in type '{ children: Element; innerRef: MutableRefObject<FormikProps<Record<string, string | number>> | null>; initialValues: Record<string, string | number>; }' but required in type 'FormikConfig<Record<string, string | number>>''

I understand the reason why onSubmit is a required prop, but there could be cases in which I do not want to use it.
For example, my submit button is not wrapped in the Formik component and I use the formik context in order to submit the form.

How do you manage this situation?

Thank you

[johnrom]

I just pass an empty function to be explicit about what happens on submit: onSubmit={() => {}}.

In HTML5 a form's default action is to submit a GET request to the current page (99% of the time, not what you want, and can be a security risk if you aren't aware this will happen). Unfortunately, in React Native that doesn't mean anything. In React Native the default action is nothing because there is no <form /> element. Formik works in both of these places and would have different behaviors without an onSubmit, so we strongly recommend (read, require in TypeScript) that you pass an onSubmit. Note that it technically doesn't have different behaviors because we do not fall back to form.submit() by default (because React Native), but this is how I think of it from a semantic perspective.

Alternatively we could do one of the following to remove the requirement to pass onSubmit, but I have a feeling it would be a debate to determine which one makes more sense:

• default to formRef.current?.submit() which the default element registers in non-Native, to be more like form.
• default to noop which is basically what it does now.

[pierroberto]

Thanks for the feedback, very helpful 🔝 .
What about a wrapper component to manage this different behaviour in React Native? Could it make sense as another possible alternative?

[johnrom]

I think any wrapper for React Native should have the same default functionality as the wrapper for React. And I think it's best to be explicit and require a submit action, even if the user ends up doing nothing. If we were to support no submit action, we would have to bypass all the rest of what Formik does on submit, the dispatches, the validation, etc, as those are all currently tied to the js form onSubmit callback by default.