{"record":{"id":"6adf3140beb5a841","repo":"marmelab/react-admin","slug":"the-filterbutton-component-requires-the-list-fi","errorCode":null,"errorMessage":"The <FilterButton> component requires the <List filters> prop to be set","messagePattern":"The <FilterButton> component requires the <List filters> prop to be set","errorType":"exception","errorClass":"Error","httpStatus":null,"severity":"error","filePath":"packages/ra-ui-materialui/src/list/filter/FilterButton.tsx","lineNumber":88,"sourceCode":"        showFilter,\n        hideFilter,\n        sort,\n    } = useListContext();\n    const hasFilterValues = !isEqual(filterValues, {});\n    const validSavedQueries = extractValidSavedQueries(savedQueries);\n    const hasSavedCurrentQuery = validSavedQueries.some(savedQuery =>\n        isEqual(savedQuery.value, {\n            filter: filterValues,\n            sort,\n            perPage,\n            displayedFilters,\n        })\n    );\n    const [open, setOpen] = useState(false);\n    const anchorEl = useRef();\n\n    if (filters === undefined) {\n        throw new Error(\n            'The <FilterButton> component requires the <List filters> prop to be set'\n        );\n    }\n\n    const allTogglableFilters = filters.filter(\n        (filterElement): filterElement is React.ReactElement => {\n            return (\n                React.isValidElement(filterElement) &&\n                !filterElement.props.alwaysOn\n            );\n        }\n    );\n\n    const handleClickButton = useCallback(\n        event => {\n            // This prevents ghost click.\n            event.preventDefault();\n            setOpen(true);","sourceCodeStart":70,"sourceCodeEnd":106,"githubUrl":"https://github.com/marmelab/react-admin/blob/051f511bb0afb5ea565c2d3728bf4dab0a6fa5e0/packages/ra-ui-materialui/src/list/filter/FilterButton.tsx#L70-L106","documentation":"FilterButton toggles the filters declared on the parent list. If useFilterContext() returns nothing and no filters prop was passed, there are no filters to toggle, so react-admin throws at render time.","triggerScenarios":"Rendering <FilterButton /> outside a <List filters={[...]}> context without passing a filters prop, or a List rendered without the filters prop while its FilterButton is used.","commonSituations":"Copying a filter toolbar into a custom page, or forgetting the filters prop on <List> while keeping the default ListView actions.","solutions":["Provide filters: <List filters={[<SearchInput source=\"q\" alwaysOn />]}>.","Pass the filters array directly to <FilterButton filters={[...]}>.","Remove FilterButton from the actions if the list has no filters."],"exampleFix":"// before\n<List>\n  <FilterButton />\n</List>\n// after\n<List filters={[<SearchInput source=\"q\" alwaysOn />]}>\n  <FilterButton />\n</List>","handlingStrategy":"validation","validationCode":"const filters = useFilterContext() ?? filtersProp;\nif (!filters) return null; // or render FilterButton only when filters are configured","typeGuard":"const hasFilters = (f: unknown): f is React.ReactElement[] => Array.isArray(f) && f.length > 0;","tryCatchPattern":"try { render(); } catch (e) { if (String(e).includes('requires the <List filters> prop')) return null; throw e; }","preventionTips":["Always declare filters on <List> when FilterButton is in actions.","Pass filters prop directly for standalone usage.","Hide FilterButton when no filters are defined."],"tags":["react-admin","missing-prop","filter-button"],"backgroundTag":"missing-required-prop","analyzedSha":"051f511bb0afb5ea565c2d3728bf4dab0a6fa5e0","analyzedAt":"2026-08-30T02:28:14.926Z","schemaVersion":2},"datasetVersion":"2026-08-30T03:17:51.788Z"}