marmelab/react-admin · error

<Edit> requires either a `render` prop or `children` prop

Error message

<Edit> requires either a `render` prop or `children` prop

What it means

The <Edit> view must receive content to render: either a `render` function prop or `children`. If both are missing the library throws immediately, since rendering nothing would leave a blank edit page.

Source

Thrown at packages/ra-ui-materialui/src/detail/Edit.tsx:80

    const {
        resource,
        id,
        mutationMode,
        mutationOptions,
        queryOptions,
        redirect,
        transform,
        disableAuthentication,
        authLoading = defaultAuthLoading,
        loading,
        error,
        redirectOnError,
        ...rest
    } = props;

    if (!props.render && !props.children) {
        throw new Error(
            '<Edit> requires either a `render` prop or `children` prop'
        );
    }

    return (
        <EditBase<RecordType>
            resource={resource}
            id={id}
            mutationMode={mutationMode}
            mutationOptions={mutationOptions}
            queryOptions={queryOptions}
            redirect={redirect}
            transform={transform}
            disableAuthentication={disableAuthentication}
            authLoading={authLoading}
            loading={loading}
            // Disable redirect on error as it is handled by EditView to display the error in the EditView container
            redirectOnError={redirectOnError ?? (error ? false : undefined)}

View on GitHub (pinned to 051f511bb0)

Solutions

  1. Pass children: <Edit resource="posts"><SimpleForm>...</SimpleForm></Edit>
  2. Or pass render: <Edit resource="posts" render={() => <SimpleForm>...</SimpleForm>} />
  3. Verify conditional wrappers don't swallow the children

Example fix

// before
<Edit resource="posts" />
// after
<Edit resource="posts">
  <SimpleForm><TextInput source="title" /></SimpleForm>
</Edit>
Defensive patterns

Strategy: validation

Validate before calling

if (React.Children.count(props.children) === 0 && !props.render) {
  throw new Error('<Edit> requires children or a render prop');
}

Type guard

const editHasBody = (p: { children?: React.ReactNode; render?: () => React.ReactNode }): boolean =>
  typeof p.render === 'function' || React.Children.count(p.children) > 0;

Prevention

When it happens

Trigger: Rendering <Edit resource="posts"> with neither children nor render; children conditionally resolving to undefined/null at runtime.

Common situations: Migration/refactor dropping the form child; copying boilerplate without the form; dynamic children logic that returns undefined.

Related errors


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