marmelab/react-admin · error

<InfiniteListBase> requires either a 'render' prop or 'child

Error message

<InfiniteListBase> requires either a 'render' prop or 'children' prop

What it means

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.

Source

Thrown at packages/ra-core/src/controller/list/InfiniteListBase.tsx:65

 */
export const InfiniteListBase = <RecordType extends RaRecord = any>({
    authLoading,
    loading,
    offline,
    error,
    empty,
    children,
    render,
    ...props
}: InfiniteListBaseProps<RecordType>) => {
    const controllerProps = useInfiniteListController<RecordType>(props);
    const isAuthPending = useIsAuthPending({
        resource: controllerProps.resource,
        action: 'list',
    });

    if (!render && !children) {
        throw new Error(
            "<InfiniteListBase> requires either a 'render' prop or 'children' prop"
        );
    }

    const {
        isPaused,
        isPending,
        isPlaceholderData,
        error: errorState,
        data,
        total,
        hasPreviousPage,
        hasNextPage,
        filterValues,
    } = controllerProps;

    const showAuthLoading =
        isAuthPending &&

View on GitHub (pinned to 051f511bb0)

Solutions

1. Add a render prop: <InfiniteListBase resource="posts" render={({ data }) => <ul>{...}</ul>} />
2. Or pass children: <InfiniteListBase resource="posts"><MyListView /></InfiniteListBase>
3. If children come from a variable, ensure it is truthy before rendering InfiniteListBase

Example fix

// before
<InfiniteListBase resource="posts" />
// after
<InfiniteListBase resource="posts" render={({ data, isPending }) => isPending ? <Loading /> : <PostList data={data} />} />

if (!render && !children) {
  throw new Error('<InfiniteListBase> needs render or children');
}
<InfiniteListBase resource="posts" render={renderFn} />

When it happens

Trigger: 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.

Common situations: 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.

Related errors

• <ListBase> requires either a 'render' prop or 'children' pro
• <ShowBase> requires either a `render` prop or `children` pro
• <List> requires either a `render` prop or `children` prop
• useReferenceFieldController: missing reference prop. You mus
• useShowController requires an id prop or a route with an /:i

AI-assisted analysis of marmelab/react-admin@051f511bb0 (2026-08-30). Data as JSON: /api/errors/e864a0727d7503d7. Report an issue: GitHub.