jaredpalmer / jaredpalmer/formik
FieldArray remove helper can set error state to empty array
- Dominant language
- TypeScript
- Stars
- 34.3k
- Forks
- 2.8k
- PR merge metrics
- No merged PRs in 30d
Description
## Current Behavior
When using FieldArray's remove helper, my errors state for the field gets set to an empty array for two renders. This is problematic if you are expecting errors to be an object with only string values.
[This line](https://github.com/jaredpalmer/formik/blob/master/src/FieldArray.tsx#L194) is what sets the errors state to an empty array, since the function is used both for the form state as well as the errors state.
## Steps to Reproduce
Use FieldArray with a populated array and call .remove() with an index. Log the errors state and observe that for two renders, the field has an empty array error state.
Here's an example codesandbox: https://codesandbox.io/s/p9x78o5zyq
If you open up the console and click the X button to remove one of the items in the array, you'll notice that errors.arr is set to an empty array for two logs before being reset by validate.

## Expected behavior
The arr field should not be present in the errors object for these cases
## Suggested solution(s)
Need a way to not default the error state to an empty array on remove. Seems like it might be necessary to change updateArrayField to allow for different logic when updating the error state rather than sharing the function that updates the form state.
**CodeSandbox Link**: https://codesandbox.io/s/p9x78o5zyq
---
- Formik Version: 1.0.1
- React Version: 16.4.1
- TypeScript Version: N/A
- Browser and Version: Chrome 67.0.3396.99
- OS: Mac OS X
- Node Version:N/A
- Package Manager and Version: N/A
Contributor guide
Research direction
Start with src/FieldArray.tsx around line 194, where updateArrayField is shared by form and error state updates. Reproduce the behavior using the linked CodeSandbox and inspect the two renders after calling FieldArray.remove() on a populated array. Done means the removed field is absent from errors rather than temporarily represented by an empty array.
Written by the indexing model from the issue text.
Assessment
- Tech stack
- react, typescript
- Domain
- frontend
- Issue type
- Bug
- Difficulty
- 3/5
- Estimated time
- 1-2 days
- Activity status
- Stale
- Clarity
- Mostly clear
- Newbie friendliness
- 45/100