marmelab/react-admin · error

<EditButton> components should be used inside a <Resource> c

Error message

<EditButton> components should be used inside a <Resource> component or provided with a resource prop. (The <Resource> component set the resource prop for all its children).

What it means

EditButton builds a navigation link to the edit view of a resource; it needs to know the resource name. The library throws at render time when neither a `resource` prop nor a ResourceContext provides one, since the edit path cannot be constructed.

Source

Thrown at packages/ra-ui-materialui/src/button/EditButton.tsx:55

    RecordType extends RaRecord = any,
>(
    inProps: EditButtonProps<RecordType>,
    ref: React.ForwardedRef<HTMLAnchorElement>
) {
    const props = useThemeProps({
        props: inProps,
        name: PREFIX,
    });
    const {
        icon = defaultIcon,
        label: labelProp,
        scrollToTop = true,
        className,
        ...rest
    } = props;
    const resource = useResourceContext(props);
    if (!resource) {
        throw new Error(
            '<EditButton> components should be used inside a <Resource> component or provided with a resource prop. (The <Resource> component set the resource prop for all its children).'
        );
    }
    const record = useRecordContext(props);
    const createPath = useCreatePath();
    const { canAccess, isPending } = useCanAccess({
        action: 'edit',
        resource,
        record,
    });
    const getResourceLabel = useGetResourceLabel();
    const getRecordRepresentation = useGetRecordRepresentation();
    const recordRepresentationValue = getRecordRepresentation(record);

    const recordRepresentation =
        typeof recordRepresentationValue === 'string'
            ? recordRepresentationValue
            : recordRepresentationValue?.toString();

View on GitHub (pinned to 051f511bb0)

Solutions

1. Pass resource explicitly: <EditButton resource="posts" />
2. Wrap usage in <ResourceContextProvider resource="posts">
3. Use the button inside a Datagrid in a List view where context is set

Example fix

// before
<EditButton />
// after
<EditButton resource="posts" />

const resource = props.resource ?? getContextResource();
if (!resource) {
  console.error('EditButton rendered without resource; add resource prop');
  return null;
}

function assertResource(r: string | undefined): asserts r is string { if (!r) throw new Error('missing resource'); }

When it happens

Trigger: Rendering <EditButton> outside <Resource> without a `resource` prop; useResourceContext(props) resolves to null.

Common situations: Row action buttons reused in custom tables not wrapped in Resource context; dashboard widgets; forgetting the prop when abstracting actions into a shared component.

Related errors

• <BulkDeleteButton> components should be used inside a <Resou
• <CreateButton> components should be used inside a <Resource>
• <DeleteButton> components should be used inside a <Resource>
• <DeleteWithConfirmButton> components should be used inside a
• <DeleteWithUndoButton> components should be used inside a <R

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