marmelab/react-admin · error · Error

useArrayInput must be used inside an ArrayInputContextProvid

Error message

useArrayInput must be used inside an ArrayInputContextProvider

What it means

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>.

Source

Thrown at packages/ra-core/src/controller/input/useArrayInput.ts:34

            ({
                append: props?.append,
                fields: props?.fields,
                insert: props?.insert,
                move: props?.move,
                prepend: props?.prepend,
                remove: props?.remove,
                replace: props?.replace,
                swap: props?.swap,
                update: props?.update,
            }) as ArrayInputContextValue,
        [props]
    );

    if (props?.fields) {
        return memo;
    }
    if (!context) {
        throw new Error(
            'useArrayInput must be used inside an ArrayInputContextProvider'
        );
    }

    return context;
};

View on GitHub (pinned to 051f511bb0)

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.

Example fix

// before: hook used outside the array input
export const MyRow = () => { const { fields } = useArrayInput(); ... }
// after: nested inside ArrayInput
<ArrayInput source="tags">
  <SimpleFormIterator><MyRow /></SimpleFormIterator>
</ArrayInput>

Defensive patterns

Strategy: type-guard

Type guard

const isInsideArrayInput = (context: ArrayInputContextValue | null | undefined): context is ArrayInputContextValue =>
  context != null && Array.isArray((context as any).fields);

Try / catch

try {
  const array = useArrayInput();
} catch (e) {
  if (e.message.includes('useArrayInput must be used inside')) {
    throw new Error('<MyRow> must be rendered as a child of <ArrayInput>');
  }
  throw e;
}

Prevention

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.

When it happens

Trigger: 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.

Common situations: 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.

Related errors

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