marmelab/react-admin · error · Error

<InfiniteList> requires either a `render` prop or `children`

Error message

<InfiniteList> requires either a `render` prop or `children` prop

What it means

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.

Source

Thrown at packages/ra-ui-materialui/src/list/InfiniteList.tsx:87

        exporter,
        filter = defaultFilter,
        filterDefaultValues,
        authLoading = defaultAuthLoading,
        loading,
        pagination = defaultPagination,
        perPage = 10,
        queryOptions,
        resource,
        sort,
        storeKey,
        ...rest
    } = useThemeProps({
        props: props,
        name: PREFIX,
    });

    if (!props.render && !props.children) {
        throw new Error(
            '<InfiniteList> requires either a `render` prop or `children` prop'
        );
    }

    return (
        <InfiniteListBase<RecordType>
            debounce={debounce}
            disableAuthentication={disableAuthentication}
            disableSyncWithLocation={disableSyncWithLocation}
            exporter={exporter}
            filter={filter}
            filterDefaultValues={filterDefaultValues}
            authLoading={authLoading}
            loading={loading}
            perPage={perPage}
            queryOptions={queryOptions}
            resource={resource}
            sort={sort}

View on GitHub (pinned to 051f511bb0)

Solutions

1. Pass children: <InfiniteList resource="posts"><Datagrid>...</Datagrid></InfiniteList>.
2. Or pass a render prop: <InfiniteList render={({ data }) => ...} />.
3. If children are conditional, gate the whole <InfiniteList> render, or use render={() => ready ? <Datagrid/> : null}.

Example fix

// before
<InfiniteList resource="posts" />

// after
<InfiniteList resource="posts">
  <Datagrid>
    <TextField source="title" />
  </Datagrid>
</InfiniteList>

if (!props.render && !props.children) {
  throw new Error('InfiniteList requires a render prop or children');
}

const hasContent = (p: { render?: unknown; children?: unknown }): boolean =>
  typeof p.render === 'function' || React.Children.count(p.children) > 0;

When it happens

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

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

Related errors

• You can only provide one function child to AdminRouter
• <ReferenceArrayInput> only accepts a single child (like <Aut
• If you're not wrapping the SelectInput inside a ReferenceInp
• If you're not wrapping the SelectInput inside a ReferenceInp
• Children of TranslatableInputs must have a source

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