{"record":{"id":"f9d6ae5aae4b82be","repo":"marmelab/react-admin","slug":"referencearrayinput-only-accepts-a-single-child","errorCode":null,"errorMessage":"<ReferenceArrayInput> only accepts a single child (like <AutocompleteArrayInput>)","messagePattern":"<ReferenceArrayInput> only accepts a single child \\(like <AutocompleteArrayInput>\\)","errorType":"exception","errorClass":"Error","httpStatus":null,"severity":"error","filePath":"packages/ra-ui-materialui/src/input/ReferenceArrayInput.tsx","lineNumber":80,"sourceCode":" * @example\n * <ReferenceArrayInput\n *      source=\"tag_ids\"\n *      reference=\"tags\"\n *      filter={{ is_public: true }}>\n *     <SelectArrayInput optionText=\"name\" />\n * </ReferenceArrayInput>\n *\n * The enclosed component may filter results. ReferenceArrayInput create a ChoicesContext which provides\n * a `setFilters` function. You can call this function to filter the results.\n */\nexport const ReferenceArrayInput = (props: ReferenceArrayInputProps) => {\n    const {\n        children = defaultChildren,\n        offline = defaultOffline,\n        ...rest\n    } = props;\n    if (React.Children.count(children) !== 1) {\n        throw new Error(\n            '<ReferenceArrayInput> only accepts a single child (like <AutocompleteArrayInput>)'\n        );\n    }\n\n    return (\n        <ReferenceArrayInputBase {...rest} offline={offline}>\n            {children}\n        </ReferenceArrayInputBase>\n    );\n};\n\nconst defaultChildren = <AutocompleteArrayInput />;\nconst defaultOffline = <Offline variant=\"inline\" />;\n\nexport interface ReferenceArrayInputProps\n    extends ReferenceArrayInputBaseProps {}\n","sourceCodeStart":62,"sourceCodeEnd":97,"githubUrl":"https://github.com/marmelab/react-admin/blob/051f511bb0afb5ea565c2d3728bf4dab0a6fa5e0/packages/ra-ui-materialui/src/input/ReferenceArrayInput.tsx#L62-L97","documentation":"<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.","triggerScenarios":"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.","commonSituations":"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.","solutions":["Ensure exactly one child input (e.g. <AutocompleteArrayInput source=\"tag_ids\" />) is passed.","If the child is conditional, pass `undefined` instead of `false`: `{cond ? <AutocompleteArrayInput/> : undefined}` still counts 0 — instead render the whole ReferenceArrayInput conditionally.","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."],"exampleFix":"// before\n<ReferenceArrayInput reference=\"tags\" source=\"tag_ids\">\n  <AutocompleteArrayInput optionText=\"name\" />\n  <ChipField source=\"name\" />\n</ReferenceArrayInput>\n\n// after\n<ReferenceArrayInput reference=\"tags\" source=\"tag_ids\">\n  <AutocompleteArrayInput optionText=\"name\" />\n</ReferenceArrayInput>","handlingStrategy":"validation","validationCode":"const childCount = React.Children.count(children);\nif (childCount !== 1) {\n  throw new Error(`ReferenceArrayInput expects exactly 1 child, got ${childCount}`);\n}","typeGuard":"const hasSingleChild = (children: React.ReactNode): children is React.ReactElement =>\n  React.Children.count(children) === 1;","tryCatchPattern":null,"preventionTips":["Never pass more than one child input to ReferenceArrayInput","Avoid `{cond && <Child/>}` inside ReferenceArrayInput; gate the whole component instead","Keep secondary display markup (chips, text) outside the ReferenceArrayInput children"],"tags":["react-admin","reference-array-input","children-validation","react"],"backgroundTag":"invalid-component-children","analyzedSha":"051f511bb0afb5ea565c2d3728bf4dab0a6fa5e0","analyzedAt":"2026-08-30T02:28:14.926Z","schemaVersion":2},"datasetVersion":"2026-08-30T03:17:51.788Z"}