What causes " requires either a `render` prop or `children` prop" in marmelab/react-admin?

<CreateBase> requires either a `render` prop or `children` p

Error message

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

What it means

CreateBase is a headless controller component: it manages create state but renders nothing itself, so callers must tell it what to render via a render prop or children. If neither is provided, there is nothing to render and react-admin throws at render time.

Source

Thrown at packages/ra-core/src/controller/create/CreateBase.tsx:65

    children,
    render,
    loading,
    authLoading = loading,
    ...props
}: CreateBaseProps<RecordType, ResultRecordType, MutationOptionsError>) => {
    const controllerProps = useCreateController<
        RecordType,
        MutationOptionsError,
        ResultRecordType
    >(props);

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

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

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

    return (
        // We pass props.resource here as we don't need to create a new ResourceContext if the props is not provided
        <OptionalResourceContextProvider value={props.resource}>
            <CreateContextProvider value={controllerProps}>
                {showAuthLoading
                    ? authLoading
                    : render
                      ? render(controllerProps)

View on GitHub (pinned to 051f511bb0)

Solutions

Pass children: <CreateBase resource="posts"><MyCreateForm/></CreateBase>
Or pass a render prop: <CreateBase resource="posts" render={() => <MyCreateForm/>} />
If wrapping CreateBase, forward children/render props through your custom component

Example fix

// before
<CreateBase resource="posts" redirect="list" /> // nothing to render
// after
<CreateBase resource="posts" redirect="list">
    <SimpleForm>
        <TextInput source="title" />
    </SimpleForm>
</CreateBase>

Defensive patterns

Strategy: validation

Validate before calling

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

Type guard

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

Try / catch

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

Prevention

Always pass children or a render prop to headless *Base components
Forward children through custom wrapper components
Check that conditional children cannot evaluate to undefined at runtime
Keep TypeScript props typed with children?: ReactNode | render?: () => ReactNode

When it happens

Trigger: Rendering <CreateBase resource="posts"> with no children and no render prop; wrapping CreateBase in a custom component that forgot to forward children; conditional rendering that yields undefined children.

Common situations: Migrating from older versions that rendered children implicitly; building custom create pages and forgetting the render prop; passing children conditionally (e.g. {someCondition && <MyCreate/>}) resulting in none at runtime.

Related errors

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