marmelab/react-admin · error

<ReferenceManyFieldBase> requires either a 'render' prop or

Error message

<ReferenceManyFieldBase> requires either a 'render' prop or 'children' prop

What it means

ReferenceManyFieldBase (core of <ReferenceManyField>) fetches many related records for a reverse relation (target field) and needs a render prop or children to display them. It throws when neither rendering mechanism is supplied since the fetched data could not be displayed.

Source

Thrown at packages/ra-core/src/controller/field/ReferenceManyFieldBase.tsx:105

        ReferenceRecordType
    >({
        debounce,
        filter,
        exporter,
        page,
        perPage,
        record,
        reference,
        resource,
        sort,
        source,
        storeKey,
        target,
        queryOptions,
    });

    if (!render && !children) {
        throw new Error(
            "<ReferenceManyFieldBase> requires either a 'render' prop or 'children' prop"
        );
    }

    const {
        data,
        error: controllerError,
        filterValues,
        hasNextPage,
        hasPreviousPage,
        isPaused,
        isPending,
        isPlaceholderData,
        total,
    } = controllerProps;

    const shouldRenderLoading =
        isPending && !isPaused && loading !== false && loading !== undefined;

View on GitHub (pinned to 051f511bb0)

Solutions

1. Add children: <ReferenceManyField reference="comments" target="post_id"><Datagrid>...</Datagrid></ReferenceManyField>
2. Or a render prop: render={({data, isPending, error}) => ...}
3. Guard conditional children so a valid child is always passed

Example fix

// before
<ReferenceManyFieldBase reference="comments" target="post_id" sort={{ field: 'created_at', order: 'DESC' }} />
// after
<ReferenceManyFieldBase reference="comments" target="post_id">
  <Datagrid>
    <TextField source="body" />
  </Datagrid>
</ReferenceManyFieldBase>

const assertRenderable = (p: { render?: unknown; children?: unknown }) => {
  if (p.render == null && p.children == null)
    throw new Error('Provide render or children');
};

const canRender = (p: { render?: unknown; children?: unknown }): boolean =>
  Boolean(p.render ?? p.children);

try {
  render(<ReferenceManyFieldBase reference="comments" target="post_id" />);
} catch (e) { logAndFallback(e); }

When it happens

Trigger: Rendering <ReferenceManyFieldBase reference="comments" target="post_id" /> with no render prop and no children; passing a children expression that resolves to undefined/false at runtime.

Common situations: Refactoring from a UI-kit variant and dropping the <Datagrid>/<SimpleList> child; conditional children that silently evaluate falsy; building a custom wrapper around the headless base and forgetting the render layer.

Related errors

• <ReferenceArrayFieldBase> requires either a 'render' prop or
• <ReferenceFieldBase> requires either a 'render' prop or 'chi
• <ReferenceOneFieldBase> requires either a 'render' prop or '
• <ReferenceArrayInputBase> requires either a 'render' prop or
• useReferenceFieldController: missing reference prop. You mus

AI-assisted analysis of marmelab/react-admin@051f511bb0 (2026-08-30). Data as JSON: /api/errors/49d4c2faa42d9732. Report an issue: GitHub.