What does a path of a field look like?

default discord avatar
cerize
8 months ago
1 1

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;
  • discord user avatar
    JarrodMFlesch
    Payload Team
    8 months ago

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

    5 replies
  • default discord avatar
    cerize
    8 months ago

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

  • discord user avatar
    JarrodMFlesch
    Payload Team
    8 months ago

    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.

  • default discord avatar
    cerize
    8 months ago

    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.

  • default discord avatar
    cerize
    8 months ago

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

  • default discord avatar
    cerize
    8 months ago

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

Open the post
Continue the discussion in GitHub
Like what we're doing?
Star us on GitHub!

Star

Connect with the Payload Community on Discord

Discord

online

Can't find what you're looking for?

Get help straight from the Payload team with an Enterprise License.