Formik and arrayField integration with material ui

Question

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

The issue i see here is you are using useFormik which is a hook in a class component thats quite strange , useFormik hook was meant to be used in the functional components . What you can do instead is to use the Formik component . — Shyam
All the fields appear to work - but this add array - not really sure how to build it - without these errors - or what these errors are about — The Old County
Its like you need to set the initial vals -- and it comes into error when that object changes? — The Old County
it appears the initial values need to be set --- I had to not use arrayhelpers in the end — The Old County
In the documentation they don't use initial values for dynamic fields: formik.org/docs/api/fieldarray — Carlo Schneider

Giang Le Giang Le · Accepted Answer · 2021-06-03T04:55:41

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

Formik and arrayField integration with material ui

1 Answers