marmelab/react-admin · error

SimpleFormIteratorItem must be used in a ResourceContextProv

Error message

SimpleFormIteratorItem must be used in a ResourceContextProvider or be passed a resource prop.

What it means

SimpleFormIteratorItemBase resolves the current resource via useResourceContext(props) to build per-row labels and actions. If neither a ResourceContextProvider nor an explicit resource prop supplies a value, it cannot proceed and throws.

Source

Thrown at packages/ra-core/src/controller/input/SimpleFormIteratorItemBase.tsx:22

    SourceContextProvider,
    useResourceContext,
    useSourceContext,
} from '../../core';
import type { RaRecord } from '../../types';
import { useSimpleFormIterator } from './useSimpleFormIterator';
import {
    SimpleFormIteratorItemContext,
    type SimpleFormIteratorItemContextValue,
} from './SimpleFormIteratorItemContext';
import type { ArrayInputContextValue } from './ArrayInputContext';

export const SimpleFormIteratorItemBase = (
    props: SimpleFormIteratorItemBaseProps
) => {
    const { children, index } = props;
    const resource = useResourceContext(props);
    if (!resource) {
        throw new Error(
            'SimpleFormIteratorItem must be used in a ResourceContextProvider or be passed a resource prop.'
        );
    }
    const { total, reOrder, remove } = useSimpleFormIterator();

    const context = useMemo<SimpleFormIteratorItemContextValue>(
        () => ({
            index,
            total,
            reOrder: newIndex => reOrder(index, newIndex),
            remove: () => remove(index),
        }),
        [index, total, reOrder, remove]
    );

    const parentSourceContext = useSourceContext();
    const sourceContext = useMemo(
        () => ({

View on GitHub (pinned to 051f511bb0)

Solutions

1. Pass an explicit resource prop: <SimpleFormIteratorItem resource="posts" index={0} ... />
2. Ensure the component is rendered inside a ResourceContextProvider (e.g. within a view under <Resource name="posts">)
3. In tests/stories, wrap with <ResourceContextProvider value="posts">

Example fix

// before
<SimpleFormIteratorItem index={0} /> // rendered at app root, no resource context
// after
<ResourceContextProvider value="posts">
  <SimpleFormIteratorItem index={0} />
</ResourceContextProvider>
// or
<SimpleFormIteratorItem resource="posts" index={0} />

const r = useResourceContext(props);
if (!r) return null;

const hasResource = (r: unknown): r is string =>
  typeof r === 'string' && r.length > 0;

try {
  render(<SimpleFormIteratorItem index={0} />);
} catch (e) { logAndFallback(e); }

When it happens

Trigger: Rendering SimpleFormIteratorItem (or a custom row component using it) outside any <Resource> / ResourceContextProvider without passing resource="..." as a prop; using it in a standalone test or Storybook render; deeply nested custom render props that break context inheritance.

Common situations: Extracting a custom delete button/row component from a Resource page into a shared library rendered outside resources; tests that mount the item in isolation; custom edit views rendered outside the normal <Resource> tree (e.g. in a modal mounted at app root).

Related errors

• SimpleFormIterator can only be called within an iterator inp
• useArrayInput must be used inside an ArrayInputContextProvid
• useSimpleFormIterator must be used inside a SimpleFormIterat
• useSimpleFormIteratorItem must be used inside a SimpleFormIt
• useListContext must be used inside a ListContextProvider

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