CODEWITHSUNDEEP
javascriptreactjsformikyup
Khelil Bezzouh
Khelil Bezzouh

Reputation: 23

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

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 ?

Upvotes: 0

Views: 2145

Answers (3)

廖展瑩
廖展瑩

Reputation: 1

I encountered the same issue in Formik v1 as well, and I found the usage for onChange is:

onChange(FIELD_NAME)(VALUE)

Which can refer to this comment

Modify your previous code will look like this:

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

Upvotes: 0

Khelil Bezzouh
Khelil Bezzouh

Reputation: 23

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>

Upvotes: 2

Tam Nguyen
Tam Nguyen

Reputation: 181

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

Upvotes: 0

Related Questions