FieldArray arrayHelpers.push doesn't add more complex objects.

[rmsj]

🐛 Bug report

Calling arrayHelpers.push(new SomeObject()) doesn't work.

Current Behavior

It adds an empty only with a field with the name of the form field. So you cannot really have more complex objects.

In my case there are three levels:

values = {
  field1, 
  ..., 
  fieldn: [
    { 
        field1,
        fieldn: [
          { 
             field1,
             fieldn
           }
         ]
     }
 ]
}

Expected behavior

The definition of arrayHelpers.push accepts anything as a parameter to push into the array. I should be able to add objects into it.

Reproducible example

I will try to write something when I have time.

Suggested solution(s)

Additional context

Your environment

Software	Version(s)
Formik	1.3.2
React	16.3.2
TypeScript
Browser	Chrome 70.0.3538.102
npm/Yarn	1.9.4
Operating System	mac

[jaredpalmer]

Can you reproduce in a codesandbox?

[sheshtiwari]

it doesn't work with react-apollo graphql - https://codesandbox.io/s/oo5rkpnw05

[brycefranzen]

I'm still having this same issue.

WORKS:

const vehiclesInit = {
  collisionDeductible: '',
  comprehensiveDeductible: '',
  currentMileage: '',
  make: 0,
  model: 0,
  trim: 0,
  year: 0,
  vin: '',
};

// In Field Array:
arrayHelpers.push(vehiclesInit);

// updates values as expected: "vehicles" array has 
// new index added with "empty" items.

DOESN't WORK:

const driversInit = {
  firstName: '',
  lastName: '',
  birthDate: { month: '', day: '', year: '' },
  gender: '',
  licenseStatus: '',
  licenseState: '',
  maritalStatus: '',
  relationship: '',
  incidents: [],
};

// In Field Array:
arrayHelpers.push(driversInit);

// does nothing to values.
// If the "push" value is more complex, it doesn't add 
// the new index at all (which results in the uncontrolled input error)

[armoredelephant]

Seeing this as well with my project. In my case adding an empty array within the object causes it to not update. The data is being added, as I can see it in my pre tag, but the component is not rendering the new fields.

[nthurnau]

I attempted to work around this same issue in my project by using the insert function as well with no luck.

[armoredelephant]

I attempted to work around this same issue in my project by using the insert function as well with no luck.

I was able to get it working by passing a new array to my object.

const deploymentItems: IndividualDeploymentItem = {
  product: "",
  modelType: "",
  serialNumber: ""
};

const additionalDeployment: EndUserDeploymentFormField = {
  endUser: "",
  ticketNumber: "",
  items: []
};

arrayHelpers.push({
    ...additionalDeployment,
    items: [{ ...deploymentItems }]
})

[bduffany]

I'm experiencing this issue too, but I can't seem to reproduce it in a Codesandbox, even with nested lists 3 layers deep. Here's the Codesandbox in case anyone wants to help mutate it to more closely match their setup:

https://codesandbox.io/s/zen-brown-6vkl1?file=/src/App.js

[moeriki]

Pushed items are run through lodash cloneDeep, which will turn the value into a primitive / plain object. https://github.com/formium/formik/blob/master/packages/formik/src/FieldArray.tsx#L206

Funny enough insert does not do this. So this works!

    insert(values.length, new File())

[navinrangar]

const driversInit = {
  firstName: '',
  lastName: '',
  birthDate: { month: '', day: '', year: '' },
  gender: '',
  licenseStatus: '',
  licenseState: '',
  maritalStatus: '',
  relationship: '',
  incidents: [],
};

// In Field Array:
arrayHelpers.push(driversInit);

push this way... arrayHelpers.push({...driversInit});