marmelab/react-admin · error

<ReferenceArrayFieldBase> requires either a 'render' prop or

Error message

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

What it means

ReferenceArrayFieldBase is the headless component behind <ReferenceArrayField>; it needs a way to render the fetched related records, supplied either via a render prop or via children (a function child or a component such as <SingleFieldList>). react-admin throws when neither is given because there would be nothing to display.

Source

Thrown at packages/ra-core/src/controller/field/ReferenceArrayFieldBase.tsx:109

    const record = useRecordContext(props);
    const controllerProps = useReferenceArrayFieldController<
        RecordType,
        ReferenceRecordType
    >({
        filter,
        exporter,
        page,
        perPage,
        record,
        reference,
        resource,
        sort,
        source,
        queryOptions,
    });

    if (!render && !children) {
        throw new Error(
            "<ReferenceArrayFieldBase> requires either a 'render' prop or 'children' prop"
        );
    }
    const {
        error: controllerError,
        isPending,
        isPaused,
        isPlaceholderData,
    } = controllerProps;

    const shouldRenderLoading =
        isPending && !isPaused && loading !== undefined && loading !== false;
    const shouldRenderOffline =
        isPaused &&
        (isPending || isPlaceholderData) &&
        offline !== undefined &&
        offline !== false;
    const shouldRenderError =

View on GitHub (pinned to 051f511bb0)

Solutions

1. Pass a child renderer, e.g. <ReferenceArrayField source="tag_ids" reference="tags"><SingleFieldList><ChipField source="name"/></SingleFieldList></ReferenceArrayField>
2. Or use the render prop: <ReferenceArrayField source="tag_ids" reference="tags" render={({error, isPending, data}) => ...} />
3. Check that children is not a falsy expression (undefined, false, empty conditional) at runtime

Example fix

// before
<ReferenceArrayField source="tag_ids" reference="tags" />
// after
<ReferenceArrayField source="tag_ids" reference="tags">
  <SingleFieldList>
    <ChipField source="name" />
  </SingleFieldList>
</ReferenceArrayField>

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(<ReferenceArrayField source="tag_ids" reference="tags" />);
} catch (e) { logAndFallback(e); }

When it happens

Trigger: Rendering <ReferenceArrayField source="tag_ids" reference="tags" /> with no render prop and no children, or passing children that are undefined/null at runtime (e.g. a conditional expression that evaluates to falsy, or only an inert prop like sort/source).

Common situations: Copying a usage example and deleting the child list component; conditionally rendering children as {cond && <Child/>} inside a JSX attribute position instead of inside the field; TypeScript not flagging it because children is optional in some overloads.

Related errors

• <ReferenceFieldBase> requires either a 'render' prop or 'chi
• <ReferenceManyFieldBase> requires either a 'render' prop or
• <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/755da9c7c3b0f48f. Report an issue: GitHub.