{"record":{"id":"699ea34984bf7113","repo":"marmelab/react-admin","slug":"usearrayinput-must-be-used-inside-an-arrayinputcon","errorCode":null,"errorMessage":"useArrayInput must be used inside an ArrayInputContextProvider","messagePattern":"useArrayInput must be used inside an ArrayInputContextProvider","errorType":"exception","errorClass":"Error","httpStatus":null,"severity":"error","filePath":"packages/ra-core/src/controller/input/useArrayInput.ts","lineNumber":34,"sourceCode":"            ({\n                append: props?.append,\n                fields: props?.fields,\n                insert: props?.insert,\n                move: props?.move,\n                prepend: props?.prepend,\n                remove: props?.remove,\n                replace: props?.replace,\n                swap: props?.swap,\n                update: props?.update,\n            }) as ArrayInputContextValue,\n        [props]\n    );\n\n    if (props?.fields) {\n        return memo;\n    }\n    if (!context) {\n        throw new Error(\n            'useArrayInput must be used inside an ArrayInputContextProvider'\n        );\n    }\n\n    return context;\n};\n","sourceCodeStart":16,"sourceCodeEnd":41,"githubUrl":"https://github.com/marmelab/react-admin/blob/051f511bb0afb5ea565c2d3728bf4dab0a6fa5e0/packages/ra-core/src/controller/input/useArrayInput.ts#L16-L41","documentation":"useArrayInput reads its form state from ArrayInputContext, which only <ArrayInput> (via ArrayInputContextProvider) sets up. If the hook runs outside that provider there is no context, and react-admin throws so you know the hook must be nested inside an <ArrayInput>.","triggerScenarios":"Calling useArrayInput in a component rendered outside <ArrayInput> (e.g. in a sibling or in the Form level); or passing props.fields yourself to a custom child outside the provider while relying on context fallback.","commonSituations":"Extracting a custom array-input row component but placing it outside the <ArrayInput> tree; reusing array-input helpers in plain react-hook-form forms that never wrap with ArrayInputContextProvider; rendering children with a portal that escapes the provider tree.","solutions":["Render the component calling useArrayInput as a child of <ArrayInput>.","If you must stand alone, provide ArrayInputContextProvider yourself with the fields and helpers from react-hook-form's useFieldArray.","Alternatively pass the fields directly via the props.fields escape hatch so the context check is skipped."],"exampleFix":"// before: hook used outside the array input\nexport const MyRow = () => { const { fields } = useArrayInput(); ... }\n// after: nested inside ArrayInput\n<ArrayInput source=\"tags\">\n  <SimpleFormIterator><MyRow /></SimpleFormIterator>\n</ArrayInput>","handlingStrategy":"type-guard","validationCode":null,"typeGuard":"const isInsideArrayInput = (context: ArrayInputContextValue | null | undefined): context is ArrayInputContextValue =>\n  context != null && Array.isArray((context as any).fields);","tryCatchPattern":"try {\n  const array = useArrayInput();\n} catch (e) {\n  if (e.message.includes('useArrayInput must be used inside')) {\n    throw new Error('<MyRow> must be rendered as a child of <ArrayInput>');\n  }\n  throw e;\n}","preventionTips":["Keep components that call useArrayInput as direct descendants of <ArrayInput> and document this in their props/docs.","Avoid portals or context-busting wrappers between ArrayInput and consumers.","For standalone use, wrap with ArrayInputContextProvider supplying react-hook-form useFieldArray results.","Add a unit test that renders the component inside ArrayInput to catch regressions."],"tags":["react-admin","react-context","array-input","hooks"],"backgroundTag":"hook-outside-provider","analyzedSha":"051f511bb0afb5ea565c2d3728bf4dab0a6fa5e0","analyzedAt":"2026-08-30T02:28:14.926Z","schemaVersion":2},"datasetVersion":"2026-08-30T03:17:51.788Z"}