I might be missing something obvious, but I am unsure what a field path looks like, specially when you have tabs, groups, arrays.
Please consider what I am trying to achieve and let me know if any of my assumptions look wrong:
const { value, setValue } = useField<string>('path')
What would be the field path for 'inEach' based on the config below?:
const Recipes: CollectionConfig = {
slug: 'recipes',
admin: {
useAsTitle: 'name',
},
fields: [
{
type: 'tabs',
tabs: [
{
label: 'TabA',
fields: [
{
name: 'name',
type: 'text',
}
]
},
{
label: 'TabB',
fields: [
{
name: 'ingredients',
type: 'array',
fields: [
{
name: 'name',
type: 'text'
},
{
name: 'quantity',
type: 'text'
},
{
name: 'itemId',
type: 'text',
admin: {
components: {
Field: IngredientSelector
}
}
}
]
},
{
name: 'amount',
label: 'Amount',
type: 'group',
admin: { readOnly: true },
fields: [
{ name: 'inG', label: 'Grams', type: 'number' },
{ name: 'inMl', label: 'Millilitres', type: 'number' },
{ name: 'inEach', label: 'Each', type: 'number' }
]
},
]
}
] }
],
}
export default Recipes;
Since your tabs do not have a name
field, I believe the path would be amount.inEach
@JarrodMFlesch Thanks a lot for your reply. So if I understand this correctly, as long as I put the 'name' field I can build the path using it no matter the kind of field? Does it matter that the parent of my custom field is an array?
No problem!
This is specific to tab
fields, which basically turns it into a group. Fields like row
, ui
, tabs
cannot have a name property, therefore are ignored when accessing a field by a path.
Thanks again @JarrodMFlesch . For people with the same problem as me, one easy way to figure out the path is to call const [fields, dispatchFields] = useAllFormFields()
and then console.log(fields) to see all paths.
@JarrodMFlesch How do I know my current position in the array?
Answering my own question, a custom component in an array has a 'props' that contains a 'path' with the array position.
Star
Discord
online
Get help straight from the Payload team with an Enterprise License.