{"record":{"id":"c7760cee6eef853c","repo":"marmelab/react-admin","slug":"infinitelist-requires-either-a-render-prop-or","errorCode":null,"errorMessage":"<InfiniteList> requires either a `render` prop or `children` prop","messagePattern":"<InfiniteList> requires either a `render` prop or `children` prop","errorType":"exception","errorClass":"Error","httpStatus":null,"severity":"error","filePath":"packages/ra-ui-materialui/src/list/InfiniteList.tsx","lineNumber":87,"sourceCode":"        exporter,\n        filter = defaultFilter,\n        filterDefaultValues,\n        authLoading = defaultAuthLoading,\n        loading,\n        pagination = defaultPagination,\n        perPage = 10,\n        queryOptions,\n        resource,\n        sort,\n        storeKey,\n        ...rest\n    } = useThemeProps({\n        props: props,\n        name: PREFIX,\n    });\n\n    if (!props.render && !props.children) {\n        throw new Error(\n            '<InfiniteList> requires either a `render` prop or `children` prop'\n        );\n    }\n\n    return (\n        <InfiniteListBase<RecordType>\n            debounce={debounce}\n            disableAuthentication={disableAuthentication}\n            disableSyncWithLocation={disableSyncWithLocation}\n            exporter={exporter}\n            filter={filter}\n            filterDefaultValues={filterDefaultValues}\n            authLoading={authLoading}\n            loading={loading}\n            perPage={perPage}\n            queryOptions={queryOptions}\n            resource={resource}\n            sort={sort}","sourceCodeStart":69,"sourceCodeEnd":105,"githubUrl":"https://github.com/marmelab/react-admin/blob/051f511bb0afb5ea565c2d3728bf4dab0a6fa5e0/packages/ra-ui-materialui/src/list/InfiniteList.tsx#L69-L105","documentation":"InfiniteList is a purely presentational list: it requires a `render` function (receiving list context and returning content) or React `children` to display rows. If neither prop is present there is nothing to render, so the component throws before mounting InfiniteListBase.","triggerScenarios":"Rendering <InfiniteList resource=\"posts\" /> with no children and no render prop; passing children that evaluate to falsy (e.g. children={undefined} from a variable) so props.children is falsy even though the prop was nominally set.","commonSituations":"Migrating from <List> where children are also required but errors read differently; building a generic list wrapper that forwards children optionally; conditional children like `{ready && <Datagrid/>}` that collapse to false.","solutions":["Pass children: <InfiniteList resource=\"posts\"><Datagrid>...</Datagrid></InfiniteList>.","Or pass a render prop: <InfiniteList render={({ data }) => ...} />.","If children are conditional, gate the whole <InfiniteList> render, or use render={() => ready ? <Datagrid/> : null}."],"exampleFix":"// before\n<InfiniteList resource=\"posts\" />\n\n// after\n<InfiniteList resource=\"posts\">\n  <Datagrid>\n    <TextField source=\"title\" />\n  </Datagrid>\n</InfiniteList>","handlingStrategy":"validation","validationCode":"if (!props.render && !props.children) {\n  throw new Error('InfiniteList requires a render prop or children');\n}","typeGuard":"const hasContent = (p: { render?: unknown; children?: unknown }): boolean =>\n  typeof p.render === 'function' || React.Children.count(p.children) > 0;","tryCatchPattern":null,"preventionTips":["Always pass a <Datagrid> child or a render function to InfiniteList","Gate the whole InfiniteList render rather than conditionally passing falsy children","For data-driven rows, prefer the render prop for full control"],"tags":["react-admin","infinite-list","children-validation","required-prop"],"backgroundTag":"missing-required-prop","analyzedSha":"051f511bb0afb5ea565c2d3728bf4dab0a6fa5e0","analyzedAt":"2026-08-30T02:28:14.926Z","schemaVersion":2},"datasetVersion":"2026-08-30T03:17:51.788Z"}