React Native & Formik pass custom params to onSubmit

Question

I'm using Formik to submit my forms. I'm trying to add a custom params to my onSubmit function, so that I can get values of the form and that custom parameter.

const handleSubmit = async (customParam) => { console.log(customParam); console.log('Values : '); console.log(values); } <AppForm initialValues={{ rejectionComment: "" }} onSubmit={handleSubmit(myCustomParam)}> //My FORMIK form <AppFormField multiline={true} numberOfLines={4} name="rejectionComment" secured={false} autoCapitalize="none" autoCorrect={false}/> <SubmitButton title="Valider" /> //Validation button </AppForm>

With this code, i'm able log the myCustomParam but I cannot get the values of the form [Unhandled promise rejection: ReferenceError: values is not defined]

If I change onSubmit to onSubmit={handleSubmit} and handleSubmit to const handleSubmit = async (values) => {console.log(values);} i can log my values, but cannot add my custom param.

Can you please provide some help ?

Where is values defined? Also, you're executing your handleSubmit function when you pass it to your AppForm. Wrap it as a callback, i.e. () => handleSubmit(myCustomParam) — Abe
– Abe, Commented Dec 29, 2021 at 20:54
Oh that's probably why I had the function triggered on render. values is directly defined by onSubmit : onSubmit: (values: Values, formikBag: FormikBag) => void | Promise<any> — B.T
– B.T, Commented Dec 29, 2021 at 20:59

Abe · Accepted Answer · 2021-12-29 21:25:28Z

You can do this with two changes.

Change your handleSubmit function to accept two arguments (it also doesn't need to be async, unless you're doing more things than you have shown here).

const handleSubmit = (values, customParam) => { console.log({ values, customParam }); };

Pass values where Formik provides them.

<AppForm onSubmit={values => { handleSubmit(values, myCustomParam); })} ... >

Explanation:

When you change your code to onSubmit={handleSubmit), the Formik component calls it with the form values. The long form of this would be onSubmit={values => handleSubmit(values)}. Since your custom param is defined outside of Formik, you need to pass it in to the function manually.

B.T · Accepted Answer · 2021-12-29 21:24:53Z

Abe pointed the obvious. By using the callback, i've been able to define both values and custom params :

onSubmit={(values) => handleSubmit(values, "test")}

const handleSubmit = async (values, customParam) => { console.log(values); console.log(customParam); }

Collectives™ on Stack Overflow

React Native & Formik pass custom params to onSubmit

2 Answers 2

Comments

Comments

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Related