{"record":{"id":"faed609ad5b3e4ba","repo":"marmelab/react-admin","slug":"displayname-component-is-not-properly-configu","errorCode":null,"errorMessage":"<${displayName}> component is not properly configured, some essential props are missing.\nBe sure to pass the props from the parent. Example:\n\nconst My${displayName} = props => (\n    <${displayName} {...props}></${displayName}>\n);\n\nThe missing props are: ${missingProps.join(', ')}","messagePattern":"<(.+?)> component is not properly configured, some essential props are missing\\.\nBe sure to pass the props from the parent\\. Example:\n\nconst My(.+?) = props => \\(\n    <(.+?) (.+?)></(.+?)>\n\\);\n\nThe missing props are: (.+?)","errorType":"exception","errorClass":null,"httpStatus":null,"severity":"error","filePath":"packages/ra-core/src/controller/checkMinimumRequiredProps.tsx","lineNumber":26,"sourceCode":"        useCheckMinimumRequiredProps(displayName, requiredProps, props);\n        return <WrappedComponent {...props} />;\n    };\n\nexport default checkMinimumRequiredProps;\n\n// Not a hook but named that way to avoid conflicts with the old one\nexport const useCheckMinimumRequiredProps = (\n    displayName: string,\n    requiredProps: string[],\n    props: any\n): void => {\n    const propNames = Object.keys(props);\n    const missingProps = requiredProps.filter(\n        prop => !propNames.includes(prop)\n    );\n\n    if (missingProps.length > 0) {\n        throw new Error(\n            `<${displayName}> component is not properly configured, some essential props are missing.\nBe sure to pass the props from the parent. Example:\n\nconst My${displayName} = props => (\n    <${displayName} {...props}></${displayName}>\n);\n\nThe missing props are: ${missingProps.join(', ')}`\n        );\n    }\n};\n","sourceCodeStart":8,"sourceCodeEnd":38,"githubUrl":"https://github.com/marmelab/react-admin/blob/051f511bb0afb5ea565c2d3728bf4dab0a6fa5e0/packages/ra-core/src/controller/checkMinimumRequiredProps.tsx#L8-L38","documentation":"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).","triggerScenarios":"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}.","commonSituations":"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).","solutions":["Spread parent props into the component: const MyList = props => <List {...props}>...</List>","Render the component inside its required parent (List/Edit/Show/RecordContext)","Provide the missing props explicitly (resource, record, id) if rendering standalone intentionally"],"exampleFix":"// before\nconst PostList = () => (\n    <Datagrid>...</Datagrid> // missing resource context from List\n);\n// after\nconst PostList = props => (\n    <List {...props}>\n        <Datagrid>...</Datagrid>\n    </List>\n);","handlingStrategy":"validation","validationCode":"const required = ['resource', 'record'];\nconst missing = required.filter(p => !(p in props));\nif (missing.length) console.warn(`Missing props before render: ${missing.join(', ')}`);","typeGuard":"const hasRequiredProps = <T extends object>(\n    props: Partial<T>,\n    required: (keyof T)[]\n): props is T => required.every(k => k in props);","tryCatchPattern":"try {\n    return <MyComponent {...props} />;\n} catch (e) {\n    if (e instanceof Error && e.message.includes('essential props are missing')) {\n        console.error(e.message); // lists the exact missing props\n        return <div>Component misconfigured: missing required props</div>;\n    }\n    throw e;\n}","preventionTips":["Read the error message: it names the exact missing props","Always spread {...props} from the parent into react-admin components","Render components inside their documented parent (List/Edit/Show/Datagrid)","Add PropTypes/TypeScript interfaces so missing props fail at compile time"],"tags":["react","props","configuration"],"backgroundTag":"missing-required-props","analyzedSha":"051f511bb0afb5ea565c2d3728bf4dab0a6fa5e0","analyzedAt":"2026-08-30T02:28:14.926Z","schemaVersion":2},"datasetVersion":"2026-08-30T03:17:51.788Z"}