Formik: ArrayHelpers Remove Throws Type Error

[eferrervaughn]

Describe the bug

Using the arrayHelpers.remove method and when I call it it says there is a TypeError. This was working for me earlier and now its not. (Same Day)

To Reproduce

I'm using the same code as the example.

          />
          {values.friends && values.friends.length > 0 ? (
            values.friends.map((friend, index) => (
              <div>
                <MySelect
                  name={`friends.${index}.type`}
                  value={`friends.${index}.type`}
                  onChange={setFieldValue}
                  current={{ curVal: values.friends, index }}
                  options={[
                    { value: "single_text", label: "Single Line Text" },
                    { value: "multi_select", label: "Multi Select" }
                  ]}
                  onBlur={setFieldTouched}
                />

                {values.friends[index] && (
                  <Field
                    name={`friends.${index}.name`}
                    onBlur={null}
                    type="text"
                    placeholder="Enter in Question Text"
                  />
                )}

                <button
                  type="button"
                  onClick={() => arrayHelpers.remove(index)} // remove a friend from the list
                >
                  -
                </button>
                <button
                  type="button"
                  onClick={() => {
                    let nextIndex = index + 1;
                    arrayHelpers.insert(nextIndex, "");
                  }} // insert an empty string at a position
                >
                  +
                </button>

Expected behavior

Suggested solution(s)

Additional context

formik.es6.js:5836 Uncaught TypeError: array.slice is not a function
at formik.es6.js:5836
at Formik. (formik.es6.js:5802)
at getStateFromUpdate (react-dom.development.js:6400)
at processUpdateQueue (react-dom.development.js:6489)
at updateClassInstance (react-dom.development.js:7143)
at updateClassComponent (react-dom.development.js:8345)
at beginWork (react-dom.development.js:8982)
at performUnitOfWork (react-dom.development.js:11814)
at workLoop (react-dom.development.js:11843)
at renderRoot (react-dom.development.js:11874)
at performWorkOnRoot (react-dom.development.js:12449)
at performWork (react-dom.development.js:12370)
at performSyncWork (react-dom.development.js:12347)
at interactiveUpdates (react-dom.development.js:12597)
at interactiveUpdates (react-dom.development.js:1958)
at dispatchInteractiveEvent (react-dom.development.js:4259)

index.js:2178 The above error occurred in the component:
in Formik (at Dynamic.js:40)
in div (at Dynamic.js:38)
in FriendList (at App.js:23)
in div (created by Row)
in Row (at App.js:22)
in div (created by Grid)
in Grid (at App.js:15)
in App (at index.js:7)

Consider adding an error boundary to your tree to customize error handling behavior.

Visit https://fb.me/react-error-boundaries to learn more about error boundaries.

• Formik Version: 0.11.11
• React Version: 16.3.2
• TypeScript Version:
• CodeSandbox Link:
• OS: Mac OSX
• Node Version: 8.12
• Package Manager and Version:

[L42y]

The same error occurred to me

[ForumT]

I am also getting the same issue.

[elderph]

Me too

[ForumT]

Ok i found out i was doing a very stupid mistake which was causing this error. sharing it as it might help others.

My fieldArray is like so:
```
name="attendee_types"
label="Attendee Types"
render={(props) => (
name="attendee_types"
label="Attendee Types"
{...props}
inLine
required
/>
)}
/>

and my validation function was:

errors.attendee_types = [];
values.attendee_types.forEach((attendeeType, i) => {
if (!attendeeType) {
errors.attendee_types[i] = "attendee type can't be blank";
}
});
if (!Object.keys(errors.attendee_types).length) {
delete errors.attendee_types;
}
```

Here I had written errors.attendee_types = {}.
So while debugging the remove function of formik, i found, it had taken errors.attendee_types also and since it was not an array, array.splice was giving errors. I changed it to array and my code works fine now.

[stale[bot]]

Hola! So here's the deal, between open source and my day job and life and what not, I have a lot to manage, so I use a GitHub bot to automate a few things here and there. This particular GitHub bot is going to mark this as stale because it has not had recent activity for a while. It will be closed if no further activity occurs in a few days. Do not take this personally--seriously--this is a completely automated action. If this is a mistake, just make a comment, DM me, send a carrier pidgeon, or a smoke signal.

[stale[bot]]

ProBot automatically closed this due to inactivity. Holler if this is a mistake, and we'll re-open it.

[fionawhim]

If anyone else comes across this, my problem was with using handleBlur in my FieldArray-controlled checkboxes.

[andrewbruno]

Thanks Fin! I also had the same issue with onBlur

[charlax]

Another reason why this may happen: #1158 (non-array errors).