marmelab/react-admin · error

<ReferenceArrayInputBase> only accepts a single child (like

Error message

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

What it means

ReferenceArrayInputBase delegates rendering of its selection UI to exactly one input child (e.g. <AutocompleteArrayInput>). React.Children.count is checked and the component throws if children contains more than one element, because it cannot know which child is the actual input to wire the array value to.

Source

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

 *     <SelectArrayInput optionText="name" />
 * </ReferenceArrayInputBase>
 *
 * The enclosed component may filter results. ReferenceArrayInputBase create a ChoicesContext which provides
 * a `setFilters` function. You can call this function to filter the results.
 */
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)

View on GitHub (pinned to 051f511bb0)

Solutions

1. Keep only one child input and move any extra elements outside <ReferenceArrayInput>
2. Wrap helper text using the input's own props (helperText) or place siblings outside the component
3. If several elements are needed, compose them into a single component and pass that as the only child
4. Alternatively use the render prop instead of children

Example fix

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

if (children && React.Children.count(children) !== 1)
  throw new Error('Exactly one child required');

const singleChild = (c: React.ReactNode): c is React.ReactElement =>
  React.Children.count(c) === 1 && React.isValidElement(React.Children.toArray(c)[0]);

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

When it happens

Trigger: Passing multiple JSX children, e.g. <ReferenceArrayInput ...><AutocompleteArrayInput/><MyHelper/><Tooltip/></ReferenceArrayInput>; wrapping the real input plus extra elements in a fragment counts each element, so fragments with several children also trigger it.

Common situations: Trying to add a label, hint, or wrapper element next to the input; migrating from plain JSX composition habits where multiple children are normal; adding a second input (like a preview list) inside the reference input.

Related errors

• <ReferenceArrayInputBase> requires either a 'render' prop or
• <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 '

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