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 ?

Do you want to execute field.onChange when there is a new file uploaded? — Danny
Yes. the function is well executed but it uses e.target.value by default which returns undefined in my case. I have to save e instead — Khelil Bezzouh

Khelil Bezzouh Khelil Bezzouh · Accepted Answer · 2021-03-04T09:26:06

Thank to nguyễn-trần-tâm

My problem is finally solved with the following code :

<Field name="appLogo">
    {({ field, form, meta }) => (
        <DropzoneArea
            filesLimit={1}
            acceptedFiles={["image/png"]}
            dropzoneClass="dropzoneArea"
            dropzoneText=""
            {...field}
            onChange={(e) => {
                props.setFieldValue("appLogo", e);
            }}
            showAlerts
        />
    )}
</Field>

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

2 Answers