Formik: Can I send data on handleSubmit to the onSubmit function ?

[HebaAhmadSaleh]

❓Question

Seriously, for immediate help, just ask your question on the #formik channel on Reactiflux.
the case is I have form which has two buttons, each of them submit the form and send a request but one of them needs to send some info in one of them for example Save with no activation and the other save with activation. info not included in the form values

[apodaka]

Every element in react has event handlers and, in most of cases, they use a reference, something like onClick={this.handleClick}, but it is possible send data without an inline function, just define a function that will hold your custom data in arguments, and that function shall return the reference function

/**
* onSubmit docs definition
*/
const handleSubmit = (values, actions) => {
  //handle values and actions
}
return (
  <Formik
    onSubmit={handleSubmit}
  >
    {children}
  <Formik>
)
/*
...
.....
sending custom data to submitHandler
*/
<Formik
  onSubmit={handleSubmit({ useThis: true })} {/*this could be a prop value*/}
>
  {children}
<Formik>

handleSubmit = (customData) => (values, actions) => {
  console.log(customData); // { useThis: true}
}

[vicasas]

Every element in react has event handlers and, in most of cases, they use a reference, something like onClick={this.handleClick}, but it is possible send data without an inline function, just define a function that will hold your custom data in arguments, and that function shall return the reference function

/**
* onSubmit docs definition
*/
const handleSubmit = (values, actions) => {
  //handle values and actions
}
return (
  <Formik
    onSubmit={handleSubmit}
  >
    {children}
  <Formik>
)
/*
...
.....
sending custom data to submitHandler
*/
<Formik
  onSubmit={handleSubmit({ useThis: true })} {/*this could be a prop value*/}
>
  {children}
<Formik>

handleSubmit = (customData) => (values, actions) => {
  console.log(customData); // { useThis: true}
}

How would it be used in a submit or button type button?

for example if I want a form to have two buttons to submit, save progress and end the form and need to know with meta data about the button clicked on user to execute the corresponding logic for each of them

[johnrom]

@vicasas if your user is saving their progress, most likely you actually do _not_ want to force validation upon them before submitting, which is what formik.onSubmit does. Instead, you want to call your submit callback directly.

const getSubmitHandler = ({ saving }) => (values, formik) => {
  const endpoint = saving 
    ? '/api/my-form/save'
    : '/api/my-form/submit';
 return fetch(endpoint, { 
    method: 'POST',      
    body: values 
  });
};
const MyForm = () => (
  <Formik onSubmit={getSubmitHandler({ saving: false })}>
    {formik => (
      <Form>
        {/* this runs validations, then submits to the /submit endpoint */}
        <button type="submit">Submit</button>

        {/* this SKIPS validations, then submits to the /save endpoint */}
        <button type="button" 
          onClick={event => getSubmitHandler({ saving: true })(formik.values, formik)}
        >Submit</button>
      </Form>
    )}
  </Formik>
);

If for some reason you really need this inverted to pass data to the onSubmit function, there is an issue here: #1792