Like what we’re doing? Star us on GitHub!

Access sibling field in an array field from a custom component

cerize
2 months ago
1 1

Hi! Consider I have the following collection Recipes:

import { CollectionConfig } from 'payload/types';
import IngredientUnit from '../components/IngredientUnit';

const Recipes: CollectionConfig = {
  slug: 'recipes',
  admin: {
    useAsTitle: 'name',
  },
  fields: [
    {
      name: 'title',
      type: 'text',
    },
    {
        name: 'ingredients',
        type: 'array',
        fields: [
            {
                name: 'name',
                type: 'text'
            },
            {
                name: 'quantity',
                type: 'text'
            },
            {
                name: 'unit',
                type: 'text',
                admin: {
                    components: {
                        Field: IngredientUnit
                    }
                }
            }
        ]
    }
  ],
}

export default Recipes;

How can I access the 'name' field inside the custom component 'IngredientUnit'? Using 'useFormFields' I am able to access the 'title' field, but not 'name'.

Thank you!!!

  • JessChowdhury
    Payload Team
    last month

    Hey @cerize - the useForm() function will allow you to access the sibling data. Not sure how your custom field is setup but it would look something like this:

    Screen Shot 2023-02-09 at 6 05 10 PM

Open the post
Continue the discussion in GitHub
Can't find what you're looking for?
Get help straight from the Payload team with an Enterprise License.Learn More