What does a path of a field look like?

[cerize]

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;

[JarrodMFlesch]

Since your tabs do not have a name field, I believe the path would be amount.inEach

[cerize]

@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?

[JarrodMFlesch]

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.

[cerize]

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.

[cerize]

@JarrodMFlesch How do I know my current position in the array?

[cerize]

Answering my own question, a custom component in an array has a 'props' that contains a 'path' with the array position.