marmelab/react-admin · error

<EditBase> requires either a 'render' prop or 'children' pro

Error message

<EditBase> requires either a 'render' prop or 'children' prop

What it means

EditBase is the headless controller for edit pages; it manages fetching and updating the record but renders nothing itself. It requires a render prop or children to know what UI to display; when neither is given it throws, mirroring the CreateBase contract.

Source

Thrown at packages/ra-core/src/controller/edit/EditBase.tsx:65

    error,
    redirectOnError,
    children,
    render,
    ...props
}: EditBaseProps<RecordType, ErrorType>) => {
    const hasError = error !== false && error !== undefined;
    const controllerProps = useEditController<RecordType, ErrorType>({
        ...props,
        redirectOnError: redirectOnError ?? (hasError ? false : undefined),
    });

    const isAuthPending = useIsAuthPending({
        resource: controllerProps.resource,
        action: 'edit',
    });

    if (!render && !children) {
        throw new Error(
            "<EditBase> requires either a 'render' prop or 'children' prop"
        );
    }

    const { isPaused, isPending, error: errorState } = controllerProps;

    const showAuthLoading =
        isAuthPending &&
        !props.disableAuthentication &&
        authLoading !== false &&
        authLoading !== undefined;

    const showLoading =
        !isPaused &&
        ((!props.disableAuthentication && isAuthPending) || isPending) &&
        loading !== false &&
        loading !== undefined;

View on GitHub (pinned to 051f511bb0)

Solutions

1. Pass children: <EditBase resource="posts" id={id}><SimpleForm>...</SimpleForm></EditBase>
2. Or pass a render prop: <EditBase ... render={() => <MyEditForm/>} />
3. Forward children/render in any custom wrapper component around EditBase

Example fix

// before
<EditBase resource="posts" id={postId} redirect="list" /> // nothing to render
// after
<EditBase resource="posts" id={postId} redirect="list">
    <SimpleForm>
        <TextInput source="title" />
    </SimpleForm>
</EditBase>

const RenderEditBase = props =>
    !props.render && !props.children
        ? null // or warn in dev
        : <EditBase {...props} />;

const hasRenderable = (p: { render?: unknown; children?: unknown }): boolean =>
    typeof p.render === 'function' || p.children != null;

try {
    return <EditBase resource="posts" id={id}>{children}</EditBase>;
} catch (e) {
    if (e instanceof Error && e.message.includes("render' prop or 'children")) {
        console.error('EditBase rendered without render prop or children');
        return null;
    }
    throw e;
}

When it happens

Trigger: Rendering <EditBase resource="posts" id={id}> without children or render prop; a custom edit wrapper that forgets to pass children through; conditional children that resolve to nothing at runtime.

Common situations: Building custom edit pages from headless components and omitting the render output; migrating from older react-admin versions with different render contracts; spreading props conditionally so children end up undefined.

Related errors

• <${displayName}> component is not properly configured, some
• <CreateBase> requires either a `render` prop or `children` p
• useReferenceFieldController: missing reference prop. You mus
• useTranslatableContext must be used inside a TranslatableCon
• useCloseNotification must be used within a CloseNotification

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