{"record":{"id":"f25ce45a8b24de73","repo":"marmelab/react-admin","slug":"uselistcontroller-received-a-react-element-as-fil","errorCode":null,"errorMessage":"useListController 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":"useListController 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/useListController.ts","lineNumber":78,"sourceCode":"        perPage = 10,\n        queryOptions = {},\n        sort = defaultSort,\n        storeKey,\n    } = props;\n    const resource = useResourceContext(props);\n    const { meta, ...otherQueryOptions } = queryOptions;\n\n    if (!resource) {\n        throw new Error(\n            `useListController requires a non-empty resource prop or context`\n        );\n    }\n    if (\n        filter &&\n        (isValidElement(filter) ||\n            (Array.isArray(filter) && filter.some(isValidElement)))\n    ) {\n        throw new Error(\n            'useListController 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":60,"sourceCodeEnd":96,"githubUrl":"https://github.com/marmelab/react-admin/blob/051f511bb0afb5ea565c2d3728bf4dab0a6fa5e0/packages/ra-core/src/controller/list/useListController.ts#L60-L96","documentation":"As with InfiniteList, `filter` must be a plain filter-values object for useListController; React elements (singly or inside arrays) belong in the `filters` prop. The controller throws when it detects an element in `filter`.","triggerScenarios":"<List filter={[<MyFilter/>]}> or filter={<MyFilter/>}; an array containing at least one element also triggers it.","commonSituations":"Copy-pasting old react-admin v2 examples where filter accepted elements; confusing `filter` vs `filters`; building filter arrays dynamically and accidentally including JSX.","solutions":["Rename the prop to `filters` for filter inputs: filters={[<PostFilter/>]}>","Keep `filter` as a plain object of values: filter={{ status: 'open' }}","Search the codebase for `filter={` and `filter={[` JSX usages on list components"],"exampleFix":"// before\n<List filter={[<SearchInput source=\"q\" />} />\n// after\n<List filters={[<SearchInput source=\"q\" />]} />\n<List filter={{ status: 'open' }} /> // object is fine","handlingStrategy":"validation","validationCode":"if (isValidElement(props.filter) || (Array.isArray(props.filter) && props.filter.some(isValidElement))) {\n  throw new Error('filter must be an object; use filters for inputs');\n}","typeGuard":"const isFilterValuesObject = (f: unknown): f is Record<string, any> =>\n  f === undefined || (typeof f === 'object' && f !== null && !Array.isArray(f) && !React.isValidElement(f));","tryCatchPattern":"try { render(<List filter={badFilter} />); } catch (e) { if (String(e).includes('filters` (with an s)')) { /* move element to filters prop */ } }","preventionTips":["Type filter as Record<string, any> in wrapper components so JSX is a compile error","Grep for `filter={[` and `filter={<` in list usages","Document filter vs filters in your team's react-admin guide"],"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"}