marmelab/react-admin · error · Error

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

Error message

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

What it means

react-admin's <List> component must know what to render for the list body. Since the render-prop refactor, it accepts either a `render` function (receiving ListContext) or classic `children` (e.g. a <Datagrid>). The component explicitly throws in its setup code when neither prop is supplied, because rendering it would otherwise produce an empty, unusable list.

Source

Thrown at packages/ra-ui-materialui/src/list/List.tsx:84

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

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

    return (
        <ListBase<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 a `render` prop: `<List render={({ filterValues }) => <Datagrid/>} />`.
2. Or pass children directly: `<List><Datagrid /></List>`.
3. If children are conditional, ensure at least one is always rendered or guard the whole <List> render instead.

Example fix

// before
<List>
  {hasColumns && <Datagrid>{columns}</Datagrid>}
</List>
// after
<List>
  <Datagrid>{columns}</Datagrid>
</List>

if (!render && !children) {
  throw new Error('<List> requires either a `render` prop or `children` prop');
}
// or simply: <List>{children ?? <Datagrid />}</List>

const hasListBody = (p: { render?: unknown; children?: unknown }): p is { render?: Function; children: React.ReactNode } =>
  typeof p.render === 'function' || React.Children.count(p.children) > 0;

When it happens

Trigger: Rendering <List> with no `render` prop and no children, e.g. `<List></></List>` empty, or `<List {...listProps} />` where a spread accidentally omits both render and children.

Common situations: Migrating from older react-admin examples that passed children, then removing the child during refactoring; conditionally rendering children like `{showGrid && <Datagrid/>}` which evaluates to no children when false; spreading props that lost the render callback.

Related errors

• <InfiniteListBase> requires either a 'render' prop or 'child
• <ListBase> requires either a 'render' prop or 'children' pro
• useReferenceFieldController: missing reference prop. You mus
• useShowController requires an id prop or a route with an /:i
• useNextPrevController was called outside of a ResourceContex

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