Error: Objects are not valid as a React child

[ainsleyclark]

Describe the Bug

I have a Reviews block, which references a collection of Reviews as a relationship (hasMany).

In a collection called Pages I reference the block under a tab Content, but I get the following error when trying to add a Review:

Error: Objects are not valid as a React child (found: object with keys {firstName, lastName, description}). If you meant to render a collection of children, use an array instead.

I believe this is to do with a group/block nested problem, but I can't be sure.

Reviews Collection

import type { CollectionConfig } from 'payload';

export const Reviews: CollectionConfig = {
  slug: 'reviews',
  labels: {
    singular: 'Testimonial',
    plural: 'Testimonials',
  },
  admin: {
    useAsTitle: 'author',
  },
  typescript: {
    interface: 'Review',
  },
  fields: [
    {
      name: 'content',
      label: 'Content',
      type: 'textarea',
      required: true,
      admin: {
        description: 'The content of the review or testimonial.',
      },
    },
    {
      name: 'author',
      type: 'group',
      admin: {
        hideGutter: true,
      },
      fields: [
        {
          type: 'row',
          fields: [
            {
              name: 'firstName',
              label: 'First Name',
              type: 'text',
              required: true,
              admin: {
                width: '50%',
                description: 'The first name of the author.',
              },
            },
            {
              name: 'lastName',
              label: 'Last Name',
              type: 'text',
              required: true,
              admin: {
                width: '50%',
                description: 'The last name of the author.',
              },
            },
            {
              name: 'description',
              label: 'Description',
              type: 'text',
              required: true,
              admin: {
                description:
                  'Give a brief description of the author, such as their role or position.',
              },
            },
          ],
        },

      ],
    },
  ],
};

Reviews Block

import type { Block } from 'payload';

export const Reviews: Block = {
  slug: 'reviews-block',
  interfaceName: 'BlockReviews',
  labels: {
    singular: 'Testimonial',
    plural: 'Testimonials',
  },
  fields: [
    {
      name: 'title',
      type: 'text',
      label: 'Title',
      required: true,
      admin: {
        description: 'Add a title for the testimonial block.',
      },
    },
    {
      name: 'content',
      type: 'textarea',
      label: 'Content',
      admin: {
        description: 'Add a content for the testimonial block.',
      },
    },
    {
      type: 'relationship',
      name: 'items',
      label: 'Reviews',
      relationTo: 'reviews',
      hasMany: true,
      admin: {
        isSortable: true,
      },
    },
  ],
};

Pages Collection:

import { Reviews } from '@/blocks/Reviews';
import type { CollectionConfig } from 'payload';

export const Pages: CollectionConfig = {
  slug: 'pages',
  timestamps: true,
  labels: {
    singular: 'Page',
    plural: 'Pages',
  },
  versions: {
    drafts: true,
    maxPerDoc: 5,
  },
  fields: [
    {
      type: 'tabs',
      tabs: [
        {
          label: 'Hero',
          fields: [
            {
              name: 'hero',
              type: 'group',
              label: 'Hero',
              admin: {
                hideGutter: true,
              },
              fields: [
                {
                  name: 'title',
                  label: 'Title',
                  type: 'text',
                  required: true,
                  admin: {
                    description: 'The main title of the page.',
                  },
                },
                {
                  name: 'lead',
                  label: 'Lead',
                  type: 'textarea',
                  required: true,
                  admin: {
                    description:
                      'A short description that appears below the title.',
                  },
                },
              ],
            },
          ],
        },
        {
          label: 'Content',
          fields: [
            {
              name: 'layout',
              type: 'blocks',
              required: true,
              blocks: [
                Reviews,
              ],
            },
          ],
        },
      ],
    },
  ],
};

Link to the code that reproduces this issue

https://github.com/ainsleydev/payload-issue

Reproduction Steps

1. Clone the repo.
2. Run Payload
3. Try and attach a review to a testimonial block in pages.

Which area(s) are affected? (Select all that apply)

area: core

Environment Info

Binaries:
  Node: 22.6.0
  npm: 10.8.2
  Yarn: 1.22.22
  pnpm: 9.14.3

[bmarianome]

Have you find a workaround at least? It's suddenly happening to me in production

[bmarianome]

The error occurs because you're using a group field as a title

[PatrikKozak]

Hey @ainsleyclark,

Just as @bmarianome mentioned - the issue is you're using a group field as a title field in admin.useAsTitle.

Currently, you can only use top level fields that aren't objects or arrays.

Let me know if you have any questions about this and I can expand but going to close this issue for now

[github-actions[bot]]

This issue has been automatically locked. Please open a new issue if this issue persists with any additional detail.