{"record":{"id":"e864a0727d7503d7","repo":"marmelab/react-admin","slug":"infinitelistbase-requires-either-a-render-prop","errorCode":null,"errorMessage":"<InfiniteListBase> requires either a 'render' prop or 'children' prop","messagePattern":"<InfiniteListBase> requires either a 'render' prop or 'children' prop","errorType":"exception","errorClass":null,"httpStatus":null,"severity":"error","filePath":"packages/ra-core/src/controller/list/InfiniteListBase.tsx","lineNumber":65,"sourceCode":" */\nexport const InfiniteListBase = <RecordType extends RaRecord = any>({\n    authLoading,\n    loading,\n    offline,\n    error,\n    empty,\n    children,\n    render,\n    ...props\n}: InfiniteListBaseProps<RecordType>) => {\n    const controllerProps = useInfiniteListController<RecordType>(props);\n    const isAuthPending = useIsAuthPending({\n        resource: controllerProps.resource,\n        action: 'list',\n    });\n\n    if (!render && !children) {\n        throw new Error(\n            \"<InfiniteListBase> 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/InfiniteListBase.tsx#L47-L83","documentation":"InfiniteListBase fetches paginated list data and needs a way to render it. It accepts either a `render` prop (function receiving list controller props) or `children` (render-prop or element). This error is thrown at render time when neither is supplied, meaning the component would have nothing to display.","triggerScenarios":"Rendering <InfiniteListBase resource=\"posts\" /> with no render or children props; passing children conditionally such that they evaluate to undefined/null/[] (e.g. children={someUndefinedVar} or {cond && <X/>} when cond is false); destructuring/removing the render prop during a refactor.","commonSituations":"Migrating from older list APIs, copy-pasting InfiniteListBase without copying the render body, wrapping it in HOCs that swallow children, or building a custom layout where the render content is injected later but the initial render has none.","solutions":["Add a render prop: <InfiniteListBase resource=\"posts\" render={({ data }) => <ul>{...}</ul>} />","Or pass children: <InfiniteListBase resource=\"posts\"><MyListView /></InfiniteListBase>","If children come from a variable, ensure it is truthy before rendering InfiniteListBase"],"exampleFix":"// before\n<InfiniteListBase resource=\"posts\" />\n// after\n<InfiniteListBase resource=\"posts\" render={({ data, isPending }) => isPending ? <Loading /> : <PostList data={data} />} />","handlingStrategy":"validation","validationCode":"if (!render && !children) {\n  throw new Error('<InfiniteListBase> needs render or children');\n}\n<InfiniteListBase resource=\"posts\" render={renderFn} />","typeGuard":null,"tryCatchPattern":null,"preventionTips":["Always pass render or children when using headless *Base components","Check conditional children for falsy results (cond && <X/>)","In TypeScript, type wrapper components so render/children is required"],"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"}