Formik: Change values before Submit

[buglessir]

❓Question

I'm using formik for a complex form. In this case I've addable inputs and I should add multi inputs to handle product features ...

Like this photo :

But, when I add inputs into formik's form, after onChange that store all inputs value into values and returns those values in submit method.

Consider it, if I've delete one or more inputs formik stored those values and in submit step those values are not essential ...

So, How can I edit formik values before submit method to handle this issue ?

I've wrote this addable with component state and I store additional inputs into an Array.

Can I edit formik values with each remove button to delete unimportant values ?

Thanks

[punit-kulal]

You can make the Delete button a component which is a formik field which taken in a name and explicitly deletes the key from the form values.
This way, the value will get deleted on click rather than you performing clean up at the end

[jaredpalmer]

You can loop through your values in you onSubmit function (this is my suggestion) or you could clean them up prior to calling handleSubmit like so

<Formik>
  {props => 
    <form onSubmit={(e) => {
      // delete unused fields
      props.setValues(cleanUpMyValues(props.values))
      // submit
      props.handleSubmit(e)
    }}>
      {/ * ... */}
   </form>
  }
</Formik>

[buglessir]

@jaredpalmer No, I've fixed it with: https://jaredpalmer.com/formik/docs/api/fieldarray 😎