{"record":{"id":"eee6179a671de9ed","repo":"marmelab/react-admin","slug":"infinitelist-received-a-react-element-as-filter","errorCode":null,"errorMessage":"<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.","messagePattern":"<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\\.","errorType":"exception","errorClass":"Error","httpStatus":null,"severity":"error","filePath":"packages/ra-core/src/controller/list/useInfiniteListController.ts","lineNumber":71,"sourceCode":"        disableSyncWithLocation = false,\n        exporter = defaultExporter,\n        filter,\n        filterDefaultValues,\n        perPage = 10,\n        queryOptions,\n        sort,\n        storeKey,\n    } = props;\n    const resource = useResourceContext(props);\n    const { meta, ...otherQueryOptions } = queryOptions ?? {};\n\n    if (!resource) {\n        throw new Error(\n            `<InfiniteList> was called outside of a ResourceContext and without a resource prop. You must set the resource prop.`\n        );\n    }\n    if (filter && isValidElement(filter)) {\n        throw new Error(\n            '<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.'\n        );\n    }\n\n    const { isPending: isPendingAuthenticated } = useAuthenticated({\n        enabled: !disableAuthentication,\n    });\n\n    const { isPending: isPendingCanAccess } = useRequireAccess<RecordType>({\n        action: 'list',\n        resource,\n        enabled: !disableAuthentication && !isPendingAuthenticated,\n    });\n\n    const translate = useTranslate();\n    const notify = useNotify();\n    const dataProvider = useDataProvider();\n","sourceCodeStart":53,"sourceCodeEnd":89,"githubUrl":"https://github.com/marmelab/react-admin/blob/051f511bb0afb5ea565c2d3728bf4dab0a6fa5e0/packages/ra-core/src/controller/list/useInfiniteListController.ts#L53-L89","documentation":"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.","triggerScenarios":"Calling <InfiniteList filter={<SomeInput/>}> or passing an element/element-containing array as `filter` to useInfiniteListController.","commonSituations":"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.","solutions":["Move filter inputs to the plural `filters` prop: <InfiniteList filters={[<PostFilter/>]}>","If you meant permanent filter values, pass a plain object: filter={{ published: true }}","Never put JSX in `filter`; wrap it in a function or object if dynamic"],"exampleFix":"// before\n<InfiniteList filter={<AlwaysOnFilter />} />\n// after\n<InfiniteList filters={[<AlwaysOnFilter />]} filter={{ isPublished: true }} />","handlingStrategy":"validation","validationCode":"const isElementInFilter = (filter) =>\n  isValidElement(filter) || (Array.isArray(filter) && filter.some(isValidElement));\nif (isElementInFilter(props.filter)) console.warn('Use the `filters` prop for filter inputs');","typeGuard":"const isFilterValues = (f: unknown): f is Record<string, any> =>\n  typeof f === 'object' && f !== null && !React.isValidElement(f) &&\n  !(Array.isArray(f) && f.some(React.isValidElement));","tryCatchPattern":"try { render(<InfiniteList filter={maybeEl} />); } catch (e) { if (String(e).includes('filters` (with an s)')) { /* swap to filters prop */ } }","preventionTips":["Remember: `filter` = values object, `filters` = array of inputs","Lint/regex your code for `filter={<` and `filter={[` on list components","Read the InfiniteList prop docs before migrating from v2 examples"],"tags":["react-admin","wrong-props","filters"],"backgroundTag":"invalid-prop-element","analyzedSha":"051f511bb0afb5ea565c2d3728bf4dab0a6fa5e0","analyzedAt":"2026-08-30T02:28:14.926Z","schemaVersion":2},"datasetVersion":"2026-08-30T03:17:51.788Z"}