What causes " requires either a 'render' prop or 'children' prop" in marmelab/react-admin?

<ReferenceOneFieldBase> requires either a 'render' prop or '

Error message

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

What it means

ReferenceOneFieldBase (core of <ReferenceOneField>) fetches the single related record matching a reverse relation and requires a render prop or children to display it. Missing both means the component has nothing to render, so react-admin throws during render.

Source

Thrown at packages/ra-core/src/controller/field/ReferenceOneFieldBase.tsx:76

        queryOptions,
    });

    const path = useGetPathForRecord({
        record: controllerProps.referenceRecord,
        resource: reference,
        link,
    });

    const context = useMemo<UseReferenceFieldControllerResult>(
        () => ({
            ...controllerProps,
            link: path,
        }),
        [controllerProps, path]
    );

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

    const recordFromContext = useRecordContext<RecordType>(props);
    const {
        error: controllerError,
        isPending,
        isPaused,
        referenceRecord,
    } = controllerProps;

    const shouldRenderLoading =
        !isPaused && isPending && loading !== false && loading !== undefined;
    const shouldRenderOffline =
        isPaused && isPending && offline !== false && offline !== undefined;
    const shouldRenderError =
        !!controllerError && error !== false && error !== undefined;

View on GitHub (pinned to 051f511bb0)

Solutions

Add children: <ReferenceOneFieldBase reference="profile" target="user_id"><TextField source="bio" /></ReferenceOneFieldBase>
Or use render={({data, isPending, error}) => ...}
Check conditional children for falsy values

Example fix

// before
<ReferenceOneFieldBase reference="profile" target="user_id" />
// after
<ReferenceOneFieldBase reference="profile" target="user_id">
  <TextField source="bio" />
</ReferenceOneFieldBase>

Defensive patterns

Strategy: validation

Validate before calling

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

Type guard

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

Try / catch

try {
  render(<ReferenceOneFieldBase reference="profile" target="user_id" />);
} catch (e) { logAndFallback(e); }

Prevention

Always supply children or render
Avoid falsy conditional children
Test one-to-one displays
Prefer UI-kit wrapper

When it happens

Trigger: Using <ReferenceOneFieldBase reference="profile" target="user_id" /> with neither render nor children; children expression that evaluates to null/undefined at runtime (conditional JSX).

Common situations: Writing a one-to-one detail display and omitting the child component; copying the controller usage from docs but not the rendering part; migrating from a custom implementation to the headless base.

Related errors

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