Field names are strings that allow dot-and-bracket syntax, allowing you to create arbitrarily deeply nested fields. There are four main things you need to understand about how field names are used to read and write the form values in Final Form.
.and[are treated the same.]is ignored.Numberkeys will result in array structures. Why?- Setting
undefinedto a field value deletes any empty object – but not array! – structures. Why?
It is very similar to Lodash's _.set(), except that empty structures are removed. Let's look at some examples:
| Field Name | Initial Structure | Setting Value | Result |
|---|---|---|---|
bar | {} | 'foo' | { bar: 'foo' } |
bar.frog | {} | 'foo' | { bar: { frog: 'foo' } } |
bar[0] | {} | 'foo' | { bar: [ 'foo' ] } |
bar.0 | {} | 'foo' | { bar: [ 'foo' ] } |
bar[1] | {} | 'foo' | { bar: [ null, 'foo' ] } |
bar[0].frog | {} | 'foo' | { bar: [ { frog: 'foo' } ] } |
bar | { bar: 'foo' } | undefined | { } |
bar.frog | { bar: { frog: 'foo' }, other: 42 } | undefined | { other: 42 } |
bar.frog[0] | { bar: { frog: [ 'foo' ] } } | undefined | { bar: { frog: [ null ] } } |
Here is a sandbox that you can play around with to get a better understanding of how it works.
