final-form / final-form/react-final-form-arrays
Please provide a full working example
- Dominant language
- TypeScript
- Stars
- 210
- Forks
- 69
- PR merge metrics
- No merged PRs in 30d
Description
### Are you submitting a **bug report** or a **feature request**?
Documentation request.
### What is the current behavior?
Currently it's not clear how to build a form with a set of array elements, which correctly tracks statuses of the fields.
The example provided in the readme just skips this problem.
Here is an updated version of the readme's example: https://codesandbox.io/s/react-final-form-field-arrays-forked-jriin?file=/index.js
As you can see, deleting a row makes the others 'dirty'.
### What is the expected behavior?
A working example to show how to properly use the component.
For example, an array of three elements `['a', 'b', 'c']` being updated by removing the first element 'a', is treated as being actually updated in a different way:
* the last element was removed
* the first two were updated.
It seems like the following bug reports describe similar problem in different ways:
https://github.com/final-form/react-final-form-arrays/issues/145
https://github.com/final-form/react-final-form-arrays/issues/37
https://github.com/final-form/react-final-form-arrays/issues/36
https://github.com/final-form/react-final-form-arrays/issues/34
https://github.com/final-form/react-final-form-arrays/issues/33
So what is the proper way of using FieldArray?
### Sandbox Link
https://codesandbox.io/s/react-final-form-field-arrays-forked-jriin?file=/index.js
### What's your environment?
See the sandbox.
Contributor guide
Research direction
Start with the README example and the linked CodeSandbox index.js; compare them with the behavior described when removing the first array item. Review issues #145, #37, #36, #34, and #33 for the existing discussion. Done means the README contains a full working FieldArray example that correctly demonstrates field statuses after row deletion.
Written by the indexing model from the issue text.
Assessment
- Tech stack
- react, typescript
- Domain
- documentation, frontend
- Issue type
- Documentation
- Difficulty
- 4/5
- Estimated time
- 3-5 days
- Activity status
- Stale
- Clarity
- Mostly clear
- Newbie friendliness
- 35/100