onChange function of Formik Field API doesn't work with child component

Question

I'm trying to validate a material-ui-dropzone component (It's upload files !) inside Formik Field API as a child component, but it doesn't' work well. I got this error when i upload a file :

TypeError: can't access property "type", target is undefined

I already tried to override the onChange function for trying to correctly add the file into the form object :

field.onChange = (e) => {
    form.values.appLogo = e;
    form.touched.appLogo = true;
}

but it doesn't work well. The object form contain what i want, but my UI render the previous state and it's problematic because i need to know that everything is OK to enable the "Next form step" button.

Here is the problematic part of my code :

const Step1 = (props) => {
  return (
    <Field name="appLogo">
      {({ field, form, meta }) => (
        /**
         *  Overriding of onChange
         */
        <div>
          {
            (field.onChange = (e) => {
              form.values.appLogo = e;
              form.touched.appLogo = true;
            })
          }
          <DropzoneArea
            filesLimit={1}
            acceptedFiles={["image/png"]}
            dropzoneClass="dropzoneArea"
            dropzoneText=""
            showAlerts
            {...field}
          />
        </div>
      )}
    </Field>
  );
};

Can you help me please ?

Answer 1

You shouldn't override onChange function. Can you try using setFieldValue instead https://github.com/formium/formik/issues/1243