final-form / final-form/react-final-form-arrays

Please provide a full working example

Open
#147 1 comment 12 reactions 0 assignees View on GitHub
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

Open the contributing 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

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.