marmelab/react-admin · error

<${displayName}> component is not properly configured, some

Error message

<${displayName}> component is not properly configured, some essential props are missing.
Be sure to pass the props from the parent. Example:

const My${displayName} = props => (
    <${displayName} {...props}></${displayName}>
);

The missing props are: ${missingProps.join(', ')}

What it means

useCheckMinimumRequiredProps verifies that essential props (like resource, record, id) were passed down to a react-admin component. When any required prop is missing, it throws with the component's displayName, a usage example, and the list of missing props — a guard against rendering components outside their intended parent (e.g. using <ListGuesser> content outside a List).

Source

Thrown at packages/ra-core/src/controller/checkMinimumRequiredProps.tsx:26

        useCheckMinimumRequiredProps(displayName, requiredProps, props);
        return <WrappedComponent {...props} />;
    };

export default checkMinimumRequiredProps;

// Not a hook but named that way to avoid conflicts with the old one
export const useCheckMinimumRequiredProps = (
    displayName: string,
    requiredProps: string[],
    props: any
): void => {
    const propNames = Object.keys(props);
    const missingProps = requiredProps.filter(
        prop => !propNames.includes(prop)
    );

    if (missingProps.length > 0) {
        throw new Error(
            `<${displayName}> component is not properly configured, some essential props are missing.
Be sure to pass the props from the parent. Example:

const My${displayName} = props => (
    <${displayName} {...props}></${displayName}>
);

The missing props are: ${missingProps.join(', ')}`
        );
    }
};

View on GitHub (pinned to 051f511bb0)

Solutions

1. Spread parent props into the component: const MyList = props => <List {...props}>...</List>
2. Render the component inside its required parent (List/Edit/Show/RecordContext)
3. Provide the missing props explicitly (resource, record, id) if rendering standalone intentionally

Example fix

// before
const PostList = () => (
    <Datagrid>...</Datagrid> // missing resource context from List
);
// after
const PostList = props => (
    <List {...props}>
        <Datagrid>...</Datagrid>
    </List>
);

const required = ['resource', 'record'];
const missing = required.filter(p => !(p in props));
if (missing.length) console.warn(`Missing props before render: ${missing.join(', ')}`);

const hasRequiredProps = <T extends object>(
    props: Partial<T>,
    required: (keyof T)[]
): props is T => required.every(k => k in props);

try {
    return <MyComponent {...props} />;
} catch (e) {
    if (e instanceof Error && e.message.includes('essential props are missing')) {
        console.error(e.message); // lists the exact missing props
        return <div>Component misconfigured: missing required props</div>;
    }
    throw e;
}

When it happens

Trigger: Rendering components like <Datagrid>, <SimpleList>, <Edit>, <Create>, or List sub-components outside their parent (no resource context); passing no record/id to components requiring them; copying a component into a standalone page without forwarding props via {...props}.

Common situations: Custom layouts reusing admin components without spreading props; refactoring that removes a parent component but keeps children; JSX snippets from docs pasted without the wrapper (e.g. <SimpleList> outside a List).

Related errors

• <CreateBase> requires either a `render` prop or `children` p
• <EditBase> requires either a 'render' prop or 'children' pro
• 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/faed609ad5b3e4ba. Report an issue: GitHub.