marmelab/react-admin · error · Error

DatagridRow can only be used within a ResourceContext or be

Error message

DatagridRow can only be used within a ResourceContext or be passed a resource prop

What it means

DatagridRow resolves the resource name via useResourceContext(props) and uses useResourceDefinition to decide whether rows link to show/edit views. When no resource exists in context and none was passed as a prop, it throws because it cannot compute hasDetailView or build row routes.

Source

Thrown at packages/ra-ui-materialui/src/list/datagrid/DatagridRow.tsx:75

    } = props;

    if (typeof id === 'undefined') {
        throw new Error('DatagridRow expects an id prop');
    }
    const context = useDatagridContext();
    const translate = useTranslate();
    const record = useRecordContext(props);
    if (!record) {
        throw new Error(
            'DatagridRow can only be used within a RecordContext or be passed a record prop'
        );
    }
    const resource = useResourceContext(props);
    const resourceDefinition = useResourceDefinition(props);
    const hasDetailView =
        resourceDefinition.hasShow || resourceDefinition.hasEdit;
    if (!resource) {
        throw new Error(
            'DatagridRow can only be used within a ResourceContext or be passed a resource prop'
        );
    }
    const expandable =
        (!context ||
            !context.isRowExpandable ||
            context.isRowExpandable(record)) &&
        expand;
    const [expanded, toggleExpanded] = useExpanded(
        resource,
        id,
        context && context.expandSingle
    );
    const [nbColumns, setNbColumns] = useState(() =>
        computeNbColumns(expandable, children, hasBulkActions)
    );
    useEffect(() => {
        // Fields can be hidden dynamically based on permissions;

View on GitHub (pinned to 051f511bb0)

Solutions

1. Pass `resource` explicitly to DatagridRow.
2. Use DatagridRow inside a <List>/<Datagrid> under a <Resource> route.
3. Wrap with `<ResourceContextProvider value="posts">` in isolated usage.

Example fix

// before
<DatagridRow id={id} record={record}>...
// after
<DatagridRow id={id} record={record} resource="posts">...

const resource = useResourceContext(props);
if (!resource) {
  throw new Error('DatagridRow rendered without ResourceContext; pass resource prop');
}

const hasResource = <T extends { resource?: string }>(p: T): p is T & { resource: string } =>
  typeof p.resource === 'string' && p.resource.length > 0;

When it happens

Trigger: Rendering <DatagridRow> (or a custom row for <Datagrid>) outside a ResourceContext without a `resource` prop.

Common situations: Previewing rows in Storybook or isolated dev pages; wrapping Datagrid in a component rendered before <Resource> is mounted; forgetting the resource prop when composing rows manually.

Related errors

• Cannot use <ListGuesser> outside of a ResourceContext
• <ListNoResults> must be used inside a <List> component
• DatagridRow can only be used within a RecordContext or be pa
• <InfiniteList> was called outside of a ResourceContext and w
• useListController requires a non-empty resource prop or cont

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