{"record":{"id":"0149e629b15eb40f","repo":"marmelab/react-admin","slug":"referencearrayinputbase-only-accepts-a-single-ch","errorCode":null,"errorMessage":"<ReferenceArrayInputBase> only accepts a single child (like <AutocompleteArrayInput>)","messagePattern":"<ReferenceArrayInputBase> only accepts a single child \\(like <AutocompleteArrayInput>\\)","errorType":"exception","errorClass":null,"httpStatus":null,"severity":"error","filePath":"packages/ra-core/src/controller/input/ReferenceArrayInputBase.tsx","lineNumber":91,"sourceCode":" *     <SelectArrayInput optionText=\"name\" />\n * </ReferenceArrayInputBase>\n *\n * The enclosed component may filter results. ReferenceArrayInputBase create a ChoicesContext which provides\n * a `setFilters` function. You can call this function to filter the results.\n */\nexport const ReferenceArrayInputBase = <RecordType extends RaRecord = any>(\n    props: ReferenceArrayInputBaseProps<RecordType>\n) => {\n    const {\n        children,\n        filter = defaultFilter,\n        offline,\n        reference,\n        render,\n        sort,\n    } = props;\n    if (children && React.Children.count(children) !== 1) {\n        throw new Error(\n            '<ReferenceArrayInputBase> only accepts a single child (like <AutocompleteArrayInput>)'\n        );\n    }\n\n    if (!render && !children) {\n        throw new Error(\n            \"<ReferenceArrayInputBase> requires either a 'render' prop or 'children' prop\"\n        );\n    }\n\n    const controllerProps = useReferenceArrayInputController({\n        ...props,\n        sort,\n        filter,\n    });\n    const { isPaused, isPending } = controllerProps;\n    // isPending is true: there's no cached data and no query attempt was finished yet\n    // isPaused is true: the query was paused (e.g. due to a network issue)","sourceCodeStart":73,"sourceCodeEnd":109,"githubUrl":"https://github.com/marmelab/react-admin/blob/051f511bb0afb5ea565c2d3728bf4dab0a6fa5e0/packages/ra-core/src/controller/input/ReferenceArrayInputBase.tsx#L73-L109","documentation":"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.","triggerScenarios":"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.","commonSituations":"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.","solutions":["Keep only one child input and move any extra elements outside <ReferenceArrayInput>","Wrap helper text using the input's own props (helperText) or place siblings outside the component","If several elements are needed, compose them into a single component and pass that as the only child","Alternatively use the render prop instead of children"],"exampleFix":"// before\n<ReferenceArrayInput source=\"tag_ids\" reference=\"tags\">\n  <AutocompleteArrayInput optionText=\"name\" />\n  <MyHelper />\n</ReferenceArrayInput>\n// after\n<ReferenceArrayInput source=\"tag_ids\" reference=\"tags\" helperText=\"Pick tags\">\n  <AutocompleteArrayInput optionText=\"name\" />\n</ReferenceArrayInput>","handlingStrategy":"validation","validationCode":"if (children && React.Children.count(children) !== 1)\n  throw new Error('Exactly one child required');","typeGuard":"const singleChild = (c: React.ReactNode): c is React.ReactElement =>\n  React.Children.count(c) === 1 && React.isValidElement(React.Children.toArray(c)[0]);","tryCatchPattern":"try {\n  render(<ReferenceArrayInput source=\"tag_ids\" reference=\"tags\"><A/><B/></ReferenceArrayInput>);\n} catch (e) { logAndFallback(e); }","preventionTips":["One child only","No multi-child fragments","Use helperText for hints","Or use render prop"],"tags":["react-admin","props-validation","children","input"],"backgroundTag":"invalid-children-structure","analyzedSha":"051f511bb0afb5ea565c2d3728bf4dab0a6fa5e0","analyzedAt":"2026-08-30T02:28:14.926Z","schemaVersion":2},"datasetVersion":"2026-08-30T03:17:51.788Z"}