{"record":{"id":"921e357807c055bf","repo":"marmelab/react-admin","slug":"listbase-requires-either-a-render-prop-or-chi","errorCode":null,"errorMessage":"<ListBase> requires either a 'render' prop or 'children' prop","messagePattern":"<ListBase> requires either a 'render' prop or 'children' prop","errorType":"exception","errorClass":null,"httpStatus":null,"severity":"error","filePath":"packages/ra-core/src/controller/list/ListBase.tsx","lineNumber":65,"sourceCode":"export const ListBase = <RecordType extends RaRecord = any>({\n    children,\n    emptyWhileLoading,\n    authLoading,\n    loading,\n    offline,\n    error,\n    empty,\n    render,\n    ...props\n}: ListBaseProps<RecordType>) => {\n    const controllerProps = useListController<RecordType>(props);\n    const isAuthPending = useIsAuthPending({\n        resource: controllerProps.resource,\n        action: 'list',\n    });\n\n    if (!render && !children) {\n        throw new Error(\n            \"<ListBase> requires either a 'render' prop or 'children' prop\"\n        );\n    }\n\n    const {\n        isPaused,\n        isPending,\n        isPlaceholderData,\n        error: errorState,\n        data,\n        total,\n        hasPreviousPage,\n        hasNextPage,\n        filterValues,\n    } = controllerProps;\n\n    const showAuthLoading =\n        isAuthPending &&","sourceCodeStart":47,"sourceCodeEnd":83,"githubUrl":"https://github.com/marmelab/react-admin/blob/051f511bb0afb5ea565c2d3728bf4dab0a6fa5e0/packages/ra-core/src/controller/list/ListBase.tsx#L47-L83","documentation":"ListBase is the headless list controller component; like InfiniteListBase it requires either a `render` function prop or `children` to output something. The error is thrown during render when both are absent, because the component cannot know what to display.","triggerScenarios":"Rendering <ListBase resource=\"posts\" /> with neither render nor children; children resolving to falsy values (null, undefined, false) at render time, e.g. children={cond && <View/>} with cond false; typos like 'renders' or childrenAsFunction usage mistakes.","commonSituations":"Refactoring from <List> (which has default children) down to ListBase in a custom setup; forgetting to pass the view after extracting it; conditional rendering that hides children on first render; TypeScript not catching falsy children.","solutions":["Pass a render prop: <ListBase resource=\"posts\" render={(props) => <ListView {...props} />} />","Or pass children elements: <ListBase resource=\"posts\"><ListView /></ListBase>","Verify any conditional wrapping around children yields a truthy element whenever ListBase renders"],"exampleFix":"// before\n<ListBase resource=\"posts\" />\n// after\n<ListBase resource=\"posts\" render={({ data }) => <DataTable data={data} />} />","handlingStrategy":"validation","validationCode":"if (!render && !children) {\n  throw new Error('<ListBase> needs render or children');\n}\n<ListBase resource=\"posts\" render={ListView} />","typeGuard":null,"tryCatchPattern":null,"preventionTips":["Always provide render or children to ListBase","Avoid destructuring that drops the render prop when wrapping ListBase","Add a required prop type / TS interface for custom list wrappers"],"tags":["react-admin","list","missing-prop","render-children"],"backgroundTag":"missing-required-prop","analyzedSha":"051f511bb0afb5ea565c2d3728bf4dab0a6fa5e0","analyzedAt":"2026-08-30T02:28:14.926Z","schemaVersion":2},"datasetVersion":"2026-08-30T03:17:51.788Z"}