marmelab/react-admin · error

<ReferenceArrayInputBase> requires either a 'render' prop or

Error message

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

What it means

ReferenceArrayInputBase requires a rendering mechanism for its selection UI: either a render prop or exactly one child input. When both are absent it throws, since the fetched choices could not be presented or wired to a form value.

Source

Thrown at packages/ra-core/src/controller/input/ReferenceArrayInputBase.tsx:97

export const ReferenceArrayInputBase = <RecordType extends RaRecord = any>(
    props: ReferenceArrayInputBaseProps<RecordType>
) => {
    const {
        children,
        filter = defaultFilter,
        offline,
        reference,
        render,
        sort,
    } = props;
    if (children && React.Children.count(children) !== 1) {
        throw new Error(
            '<ReferenceArrayInputBase> only accepts a single child (like <AutocompleteArrayInput>)'
        );
    }

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

    const controllerProps = useReferenceArrayInputController({
        ...props,
        sort,
        filter,
    });
    const { isPaused, isPending } = controllerProps;
    // isPending is true: there's no cached data and no query attempt was finished yet
    // isPaused is true: the query was paused (e.g. due to a network issue)
    // Both true: we're offline and have no data to show
    const shouldRenderOffline =
        isPaused && isPending && offline !== undefined && offline !== false;

    return (
        <ResourceContextProvider value={reference}>

View on GitHub (pinned to 051f511bb0)

Solutions

1. Add a single child input: <ReferenceArrayInput source="tag_ids" reference="tags"><AutocompleteArrayInput optionText="name" /></ReferenceArrayInput>
2. Or provide a render prop: render={({choices, error, isPending}) => ...}
3. Ensure the children variable/conditional resolves to a defined element

Example fix

// before
<ReferenceArrayInput source="tag_ids" reference="tags" />
// after
<ReferenceArrayInput source="tag_ids" reference="tags">
  <AutocompleteArrayInput optionText="name" />
</ReferenceArrayInput>

if (props.render == null && props.children == null)
  throw new Error('Provide render or a single child');

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

try {
  render(<ReferenceArrayInput source="tag_ids" reference="tags" />);
} catch (e) { logAndFallback(e); }

When it happens

Trigger: Rendering <ReferenceArrayInput source="tag_ids" reference="tags" /> with no child and no render prop; children provided only via a variable that is undefined/null at runtime; conditional children like {enabled && <Input/>} evaluating to false.

Common situations: Building a custom array input wrapper and forgetting the child; dynamic input selection that yields undefined; copying controller-only examples from the headless docs without the render layer.

Related errors

• <ReferenceArrayFieldBase> requires either a 'render' prop or
• <ReferenceFieldBase> requires either a 'render' prop or 'chi
• <ReferenceManyFieldBase> requires either a 'render' prop or
• <ReferenceOneFieldBase> requires either a 'render' prop or '
• <ReferenceArrayInputBase> only accepts a single child (like

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