marmelab/react-admin · error · Error

<InfiniteList> received a React element as `filter` props. I

Error message

<InfiniteList> received a React element as `filter` props. If you intended to set the list filter elements, use the `filters` (with an s) prop instead. The `filter` prop is internal and should not be set by the developer.

What it means

The `filter` prop is an internal object for the list controller, while UI filter elements belong in the `filters` (plural) prop. Passing a React element to `filter` is always a mistake, so the library throws immediately to redirect the developer to the correct prop.

Source

Thrown at packages/ra-core/src/controller/list/useInfiniteListController.ts:71

        disableSyncWithLocation = false,
        exporter = defaultExporter,
        filter,
        filterDefaultValues,
        perPage = 10,
        queryOptions,
        sort,
        storeKey,
    } = props;
    const resource = useResourceContext(props);
    const { meta, ...otherQueryOptions } = queryOptions ?? {};

    if (!resource) {
        throw new Error(
            `<InfiniteList> was called outside of a ResourceContext and without a resource prop. You must set the resource prop.`
        );
    }
    if (filter && isValidElement(filter)) {
        throw new Error(
            '<InfiniteList> received a React element as `filter` props. If you intended to set the list filter elements, use the `filters` (with an s) prop instead. The `filter` prop is internal and should not be set by the developer.'
        );
    }

    const { isPending: isPendingAuthenticated } = useAuthenticated({
        enabled: !disableAuthentication,
    });

    const { isPending: isPendingCanAccess } = useRequireAccess<RecordType>({
        action: 'list',
        resource,
        enabled: !disableAuthentication && !isPendingAuthenticated,
    });

    const translate = useTranslate();
    const notify = useNotify();
    const dataProvider = useDataProvider();

View on GitHub (pinned to 051f511bb0)

Solutions

1. Move filter inputs to the plural `filters` prop: <InfiniteList filters={[<PostFilter/>]}>
2. If you meant permanent filter values, pass a plain object: filter={{ published: true }}
3. Never put JSX in `filter`; wrap it in a function or object if dynamic

Example fix

// before
<InfiniteList filter={<AlwaysOnFilter />} />
// after
<InfiniteList filters={[<AlwaysOnFilter />]} filter={{ isPublished: true }} />

const isElementInFilter = (filter) =>
  isValidElement(filter) || (Array.isArray(filter) && filter.some(isValidElement));
if (isElementInFilter(props.filter)) console.warn('Use the `filters` prop for filter inputs');

const isFilterValues = (f: unknown): f is Record<string, any> =>
  typeof f === 'object' && f !== null && !React.isValidElement(f) &&
  !(Array.isArray(f) && f.some(React.isValidElement));

try { render(<InfiniteList filter={maybeEl} />); } catch (e) { if (String(e).includes('filters` (with an s)')) { /* swap to filters prop */ } }

When it happens

Trigger: Calling <InfiniteList filter={<SomeInput/>}> or passing an element/element-containing array as `filter` to useInfiniteListController.

Common situations: Confusing `filter` (persistent filter values) with `filters` (filter inputs UI); copy-pasting List examples that used the wrong prop; migration between react-admin versions where examples changed.

Related errors

• useListController received a React element as `filter` props
• Cannot use alwaysOn and defaultValue on a filter input. Plea
• 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

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