marmelab/react-admin · error · Error

<ReferenceArrayInput> only accepts a single child (like <Aut

Error message

<ReferenceArrayInput> only accepts a single child (like <AutocompleteArrayInput>)

What it means

<ReferenceArrayInput> renders exactly one input child (e.g. <AutocompleteArrayInput> or <SelectArrayInput>) that knows how to handle array values and the choices context. React.Children.count(children) !== 1 triggers this error, so zero children, multiple children, or falsy-but-present children (like `{cond && <X/>}` evaluating to false) all fail. The library throws in development to catch an invalid composition early.

Source

Thrown at packages/ra-ui-materialui/src/input/ReferenceArrayInput.tsx:80

 * @example
 * <ReferenceArrayInput
 *      source="tag_ids"
 *      reference="tags"
 *      filter={{ is_public: true }}>
 *     <SelectArrayInput optionText="name" />
 * </ReferenceArrayInput>
 *
 * The enclosed component may filter results. ReferenceArrayInput create a ChoicesContext which provides
 * a `setFilters` function. You can call this function to filter the results.
 */
export const ReferenceArrayInput = (props: ReferenceArrayInputProps) => {
    const {
        children = defaultChildren,
        offline = defaultOffline,
        ...rest
    } = props;
    if (React.Children.count(children) !== 1) {
        throw new Error(
            '<ReferenceArrayInput> only accepts a single child (like <AutocompleteArrayInput>)'
        );
    }

    return (
        <ReferenceArrayInputBase {...rest} offline={offline}>
            {children}
        </ReferenceArrayInputBase>
    );
};

const defaultChildren = <AutocompleteArrayInput />;
const defaultOffline = <Offline variant="inline" />;

export interface ReferenceArrayInputProps
    extends ReferenceArrayInputBaseProps {}

View on GitHub (pinned to 051f511bb0)

Solutions

1. Ensure exactly one child input (e.g. <AutocompleteArrayInput source="tag_ids" />) is passed.
2. If the child is conditional, pass `undefined` instead of `false`: `{cond ? <AutocompleteArrayInput/> : undefined}` still counts 0 — instead render the whole ReferenceArrayInput conditionally.
3. If you need multiple children or custom layout, put only the input child inside and move extra markup outside, or build a custom input and pass it as the single child.

Example fix

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

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

const childCount = React.Children.count(children);
if (childCount !== 1) {
  throw new Error(`ReferenceArrayInput expects exactly 1 child, got ${childCount}`);
}

const hasSingleChild = (children: React.ReactNode): children is React.ReactElement =>
  React.Children.count(children) === 1;

When it happens

Trigger: Passing no child at all, passing two or more children (even with a fragment containing several inputs), or passing a child expression that evaluates to false/undefined such as `{isFoo && <AutocompleteArrayInput source="tags" />}` when isFoo is false.

Common situations: Developers try to render two inputs off one reference (e.g. an autocomplete plus a hidden input), wrap the child in a custom layout element, or conditionally render the child with && which injects a literal `false` child when the condition is false.

Related errors

• You can only provide one function child to AdminRouter
• Children of TranslatableInputs must have a source
• <InfiniteList> requires either a `render` prop or `children`
• useCanAccess must be used inside a <Resource> component or p
• useCreateController requires a non-empty resource prop or co

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