What does a path of a field look like?
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:
- have a custom component to handle selecting ingredients (IngredientSelector)
- depending on the values selected inside this custom component, set the values for the readonly field 'inEach'. I made this field readonly so the user can not change it, its value is only set based on the ingredient selected
- I tried to use 'useField' inside IngredientSelector and call 'setValue' on the handler function when an ingredient is selected to set the value of 'inEach'
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
namefield, I believe the path would beamount.inEach5 replies@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
tabfields, which basically turns it into a group. Fields likerow,ui,tabscannot 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.
Continue the discussion in GitHub
Get help straight from the Payload team with an Enterprise License.Learn More