marmelab/react-admin · error · Error
SimpleFormIterator can only be called within an iterator inp
Error message
SimpleFormIterator can only be called within an iterator input like ArrayInput
What it means
<SimpleFormIterator> renders the rows of an <ArrayInput>; it relies on the iterator context that ArrayInput provides (via useWrappedSource/useArrayInput) to know which array field it manages. Used outside such an input, the wrapped source is empty and it throws.
Source
Thrown at packages/ra-ui-materialui/src/input/ArrayInput/SimpleFormIterator.tsx:60
addButton = <DefaultAddItemButton />,
removeButton,
reOrderButtons,
children,
className,
disabled,
disableAdd = false,
disableClear,
disableRemove = false,
disableReordering,
inline,
getItemLabel = false,
fullWidth,
sx,
} = props;
const finalSource = useWrappedSource('');
if (!finalSource) {
throw new Error(
'SimpleFormIterator can only be called within an iterator input like ArrayInput'
);
}
const { fields } = useArrayInput(props);
const record = useRecordContext(props);
const records = get(record, finalSource);
const getArrayInputNewItemDefaults =
useGetArrayInputNewItemDefaults(fields);
const getItemDefaults = useEvent((item: any = undefined) => {
if (item != null) return item;
return getArrayInputNewItemDefaults(children);
});
return (
<SimpleFormIteratorBase getItemDefaults={getItemDefaults} {...props}>
<Root
className={clsx(View on GitHub (pinned to 051f511bb0)
Solutions
- Always nest it inside <ArrayInput>: `<ArrayInput source="tags"><SimpleFormIterator><TextField source="name" /></SimpleFormIterator></ArrayInput>`.
- For related-record lists use <ReferenceManyField> with its own iterator (e.g. <Datagrid> or <SimpleList>), not SimpleFormIterator.
- If you need a custom iterator, build it on the iterator context that ArrayInput provides.
Example fix
// before
<SimpleForm>
<SimpleFormIterator>
<TextField source="name" />
</SimpleFormIterator>
</SimpleForm>
// after
<SimpleForm>
<ArrayInput source="tags">
<SimpleFormIterator>
<TextField source="name" />
</SimpleFormIterator>
</ArrayInput>
</SimpleForm> Defensive patterns
Strategy: validation
Validate before calling
// Ensure SimpleFormIterator is a direct child of ArrayInput
<CheckIteratorParent>{children}</CheckIteratorParent> // or assert useWrappedSource('') returns non-empty in dev Prevention
- Always nest SimpleFormIterator inside <ArrayInput>.
- Use ReferenceManyField + Datagrid for related lists, not SimpleFormIterator.
- Code-review form JSX nesting when refactoring.
When it happens
Trigger: Placing <SimpleFormIterator> directly inside a form (not inside <ArrayInput>); using it inside <ReferenceManyField> or other non-iterator inputs; nesting it outside any input that supplies iterator context.
Common situations: Copy-pasting SimpleFormIterator into a plain SimpleForm; trying to reuse it for ReferenceManyField lists; refactoring forms and accidentally un-nesting it from ArrayInput.
Related errors
- SimpleFormIteratorItem must be used in a RecordContextProvid
- useCanAccess must be used inside a <Resource> component or p
- useCreateController requires a non-empty resource prop or co
- useEditController requires a non-empty resource prop or cont
- useEditController requires an id prop or a route with an /:i
AI-assisted analysis of marmelab/react-admin@051f511bb0 (2026-08-30).
Data as JSON: /api/errors/36f7ee3af1da1a8b.
Report an issue: GitHub.