Access sibling field in an array field from a custom component

default discord avatar
cerize
8 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!!!

  • discord user avatar
    JessChowdhury
    Payload Team
    7 months ago

    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
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.