Organizing Your Fields
For simple forms, it's enough to use flat field names, as you saw in previous sections:
<FormField name="name" />
<FormField name="email" />
<FormField name="password" />
Sometimes it's not enough cause you want your fields more organized, like grouping them into sub-fields. React Hooks Form uses lodash-like keys for storing values. This means that your field name could be any key that lodash supports.
All of the following names are valid:
// Array
<FormField name="holidays[0]" />
<FormField name="holidays[1]" />
<FormField name="holidays[2]" />
// Object
<FormField name="product.name" />
<FormField name="product.price" />
<FormField name="seller.name" />
<FormField name="seller.url" />
// Array of objects
<FormField name="options[0].label" />
<FormField name="options[0].value" />
<FormField name="options[1].label" />
<FormField name="options[1].value" />
This way you'll get nested form values:
{
// Array
holidays: [
'2019-01-01',
'2019-01-02',
'2019-01-03'
],
// Object
product: {
name: 'Google Pixel 3',
price: '449.99',
},
seller: {
name: 'Amazon',
url: 'https://amazon.com'
}
// Array of Objects
options: [
{
label: 'Option A',
value: 'a'
},
{
label: 'Option B',
value: 'b'
}
]
}