More control over array items' labels

[grundiss]

It'd be great to have more control over the labels of an array field's items.

Consider the following screenshot, please.

UX would be so much better if there were a way to replace Question 01 with the actual question title. Or maybe such a mechanism already exists and I just failed to find it?

[viktorbezdek]

👍🏻 If you don't plan to implement this, getting pointers on how to implement it would be helpful as well.

[grundiss]

There's a labels option there, but it doesn't really do the job I want. In theory, I might have put a React element there, but that would count as cheating the type check and therefore can easily turn broken on the next upgrade

[Swahjak]

There is the following option, but I don't see how you get the actual title in there because it just gives you the id:

{
            type: 'array',
            name: 'questions',
            label: 'Questions',
            minRows: 0,
            maxRows: 20,
            admin: {
                components: {
                    RowLabel: ({ data, index, path }) => {
                        if (data.question) {
                            return data.question; // this will return the ID
                        }

                        return `Question ${index + 1}`;
                    },
                },
            }
        }

[JarrodMFlesch]

Hey @Swahjak you can do exactly what you are looking for (and more) by creating a React component to render your row label. Here is an example derived from your code snippet above:

// QuestionRowLabel.tsx

import React from 'react'
import { useField } from 'payload/components/forms'

export const QuestionRowLabel = ({ data, index, path: arrayFieldPath }) => {
  // arrayFieldPath example: "questions.0"
  const path = `${arrayFieldPath}.question`
  const { value } = useField({ path })

  if (value) {
    // assuming question is a text field inside the array
    return data.question;
  }

  return `Question ${index + 1}`;
}

And you would import that into your config file like so:

// example array field with custom component

{
  type: 'array',
  name: 'questions',
  label: 'Questions',
  minRows: 0,
  maxRows: 20,
  admin: {
    components: {
      RowLabel: QuestionRowLabel,
    },
  }
}

[Qubica]

How should this be done with Payload 3 beta?

[hjbugajski]

hi @Qubica! i saw this pattern somewhere in the 3.0 code, can't seem to find it now, but this is how i have custom labels working:

src/
├── app/
└── payload/
    ├── components/
    │   └── row-label/
    │       ├── get-row-label.tsx
    │       └── index.tsx
    └── fields/
        └── link.ts

// row-label/index.ts
'use client';

import { useRowLabel } from '@payloadcms/ui';
import { Data } from 'payload/types';

export function RowLabel({ path, fallback }: { path: string; fallback: string }) {
  const { data, rowNumber } = useRowLabel<Data>();
  const fieldValue: any = path.split('.').reduce((value, part) => value?.[part], data);

  return <>{fieldValue || `${fallback} ${rowNumber}`}</>;
}

// get-row-label.tsx
import { RowLabel } from '@/payload/components/row-label';

export const getRowLabel = (path: string, fallback: string) => (
  <RowLabel path={path} fallback={fallback} />
);

// link.ts
import { Field } from 'payload/types';

import { getRowLabel } from '@/payload/components/row-label/get-row-label';

const fields: Field[] = [...];

export const linkArray: Field = {
  name: 'links',
  type: 'array',
  admin: {
    components: {
      RowLabel: () => getRowLabel('text', 'Link'),
    },
  },
  interfaceName: 'FieldLinkArray',
  fields,
};

[tomekwlod]

I don't think this is working anymore. I am on a new beta version (3beta55 to be precise) and all I get from the useRowLabel hook is:

{
    "data": {},
    "path": "",
    "rowNumber": undefined
}