marmelab/react-admin · error

The UpdateWithUndoButton must be used inside a RecordContext

Error message

The UpdateWithUndoButton must be used inside a RecordContext.Provider or must be passed a record prop.

What it means

UpdateWithUndoButton performs an undo-able update on the current record; it must know which record to update. If no `record` prop was passed and no RecordContext.Provider supplies one, the click handler throws.

Source

Thrown at packages/ra-ui-materialui/src/button/UpdateWithUndoButton.tsx:71

            ),
        });
        // We don't support React elements for this
        if (React.isValidElement(recordRepresentation)) {
            recordRepresentation = `#${record?.id}`;
        }
        const label = useResourceTranslation({
            resourceI18nKey: `resources.${resource}.action.update`,
            baseI18nKey: 'ra.action.update',
            options: {
                name: resourceName,
                recordRepresentation,
            },
            userText: labelProp,
        });

        const handleClick = e => {
            if (!record) {
                throw new Error(
                    'The UpdateWithUndoButton must be used inside a RecordContext.Provider or must be passed a record prop.'
                );
            }
            handleUpdate(data);
            if (typeof onClick === 'function') {
                onClick(e);
            }
            e.stopPropagation();
        };

        return (
            <StyledButton
                ref={ref}
                onClick={handleClick}
                // avoid double translation
                label={<>{label}</>}
                // If users provide a ReactNode as label, its their responsibility to also provide an aria-label should they need it
                aria-label={typeof label === 'string' ? label : undefined}

View on GitHub (pinned to 051f511bb0)

Solutions

1. Pass record explicitly: <UpdateWithUndoButton record={record} data={...} />
2. Render the button inside Edit/Show views where RecordContext is provided
3. Wrap usage in <RecordContext.Provider value={record}>

Example fix

// before
<UpdateWithUndoButton data={{ is_published: true }} />
// after
<UpdateWithUndoButton record={record} data={{ is_published: true }} />

if (!record) {
  // render button disabled or skip entirely
  return null;
}
return <UpdateWithUndoButton record={record} data={data} />;

const hasRecord = (r: RaRecord | undefined): r is RaRecord => r != null && typeof r === 'object' && 'id' in r;

When it happens

Trigger: Clicking <UpdateWithUndoButton> rendered outside a RecordContext.Provider without a `record` prop; record is undefined when handleClick fires.

Common situations: Buttons placed in headers or toolbars without record context; bulk-action rows where record wasn't forwarded; forgetting the prop in custom tables.

Related errors

• useGetRecordId could not find the current record id. You nee
• DataTableRow can only be used within a RecordContext or be p
• <TranslatableFields> was called outside of a RecordContext a
• SimpleFormIteratorItem must be used in a RecordContextProvid
• DatagridRow can only be used within a RecordContext or be pa

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