Formik and arrayField integration with material ui

user_2700673 0
Viewed 637

enter image description here

I'm trying to build a formik/material ui framework -- but the array field structure doesn't seem to be working properly.

https://codesandbox.io/s/jovial-albattani-ztf10

When you try and add a 3rd friend and start typing -- I get the error "trying to control uncontrolled" issue?

Warning: A component is changing a controlled input of type text to be uncontrolled. Input elements should not switch from controlled to uncontrolled (or vice versa). Decide between using a controlled or uncontrolled input element for the lifetime of the component.

-- in these docs though I don't see this error? https://codesandbox.io/s/github/formik/formik/tree/master/examples/field-arrays?from-embed=&file=/index.js https://formik.org/docs/examples/field-arrays

------------- -- this was using useformik and didn't work with the arrayfields

https://codesandbox.io/s/boring-kare-ixonw

when I click on "Add Member" -- the error "Cannot read property 'setFormikState' of undefined" shows up

I've tried following these examples - but I am unsure what is causing this error. https://formik.org/docs/api/fieldarray

I've tried using fieldArrayHelper - but it doesn't seem to take

https://codesandbox.io/s/boring-kare-ixonw?file=/src/_Globals/GeneralFormik/FieldHandler.js

yup formik reactjs
1 Answers

when inputs are receiving undefined values, which React interprets to mean the inputs are uncontrolled. You can see that here https://github.com/formium/formik/issues/28.

So what you need is init a friend value when click Add a Friend like this (FieldArrayHandler.js)

<Button
   disabled={parent.disabled}
   variant="contained"
   color="primary"
   type="button"
   onClick={() =>
     arrayHelpers.push({ firstName: "", lastName: "" })
   }
>
   Add a friend
</Button>

And you can see a demo working here

user_70993270
Related