marmelab/react-admin · error · Error

<ListNoResults> must be used inside a <List> component

Error message

<ListNoResults> must be used inside a <List> component

What it means

<ListNoResults> is the component <List> shows when the filtered list is empty. It derives the resource name via useResourceContext and needs it to build the 'No results found for X' label; when no resource is in context (and none passed as a prop) it throws.

Source

Thrown at packages/ra-ui-materialui/src/list/ListNoResults.tsx:18

import * as React from 'react';
import { CardContent, Typography } from '@mui/material';
import {
    useGetResourceLabel,
    useListContextWithProps,
    useResourceContext,
    useTranslate,
} from 'ra-core';

import { Button } from '../button';

export const ListNoResults = (props: ListNoResultsProps) => {
    const translate = useTranslate();
    const resource = useResourceContext(props);
    const { filterValues, setFilters } = useListContextWithProps(props);
    const getResourceLabel = useGetResourceLabel();
    if (!resource) {
        throw new Error(
            '<ListNoResults> must be used inside a <List> component'
        );
    }
    return (
        <CardContent>
            <Typography variant="body2">
                {filterValues &&
                setFilters &&
                Object.keys(filterValues).length > 0 ? (
                    <>
                        {translate('ra.navigation.no_filtered_results', {
                            resource,
                            name: getResourceLabel(resource, 0),
                            _: 'No results found with the current filters.',
                        })}{' '}
                        <Button
                            onClick={() => setFilters({}, [])}
                            label={translate('ra.navigation.clear_filters', {

View on GitHub (pinned to 051f511bb0)

Solutions

1. Use it inside a <List> so the resource context is available.
2. Pass the resource explicitly: `<ListNoResults resource="posts" />`.
3. Wrap with `<ResourceContextProvider value="posts">` if used outside a list.

Example fix

// before
export const EmptyState = () => <ListNoResults />;
// after
export const EmptyState = () => <ListNoResults resource="posts" />;

const resource = useResourceContext();
if (!resource) {
  throw new Error('ListNoResults used outside a List: pass a resource prop');
}

const hasResource = (p: { resource?: string }): p is { resource: string } => typeof p.resource === 'string';

When it happens

Trigger: Rendering <ListNoResults> (or passing it as a custom `empty` component) outside a <List>/ListContext with no resource in context and no `resource` prop.

Common situations: Passing `<List empty={<ListNoResults/>}>` from a component rendered outside a ResourceContextProvider; typo in resource prop name; using ListNoResults as a generic 'empty state' widget in a non-list page.

Related errors

• Cannot use <ListGuesser> outside of a ResourceContext
• DatagridRow can only be used within a ResourceContext or be
• <InfiniteList> was called outside of a ResourceContext and w
• useListController requires a non-empty resource prop or cont
• useShowController requires a non-empty resource prop or cont

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