{"record":{"id":"0c70ea75951df645","repo":"marmelab/react-admin","slug":"the-value-prop-is-required-at-runtime","errorCode":null,"errorMessage":"the value prop is required at runtime","messagePattern":"the value prop is required at runtime","errorType":"exception","errorClass":"Error","httpStatus":null,"severity":"error","filePath":"packages/ra-ui-materialui/src/form/FormTab.tsx","lineNumber":27,"sourceCode":"    const {\n        children,\n        className,\n        contentClassName,\n        count,\n        hidden,\n        icon,\n        iconPosition,\n        intent,\n        label,\n        onChange,\n        path,\n        resource,\n        syncWithLocation,\n        value,\n        ...rest\n    } = props;\n    if (typeof value === 'undefined') {\n        throw new Error('the value prop is required at runtime');\n    }\n\n    const renderHeader = () => (\n        <FormTabHeader\n            label={label}\n            count={count}\n            value={value}\n            icon={icon}\n            iconPosition={iconPosition}\n            className={className}\n            syncWithLocation={syncWithLocation}\n            onChange={onChange}\n            {...sanitizeRestProps(rest)}\n        />\n    );\n\n    const renderContent = () => (\n        <FormGroupContextProvider name={value.toString()}>","sourceCodeStart":9,"sourceCodeEnd":45,"githubUrl":"https://github.com/marmelab/react-admin/blob/051f511bb0afb5ea565c2d3728bf4dab0a6fa5e0/packages/ra-ui-materialui/src/form/FormTab.tsx#L9-L45","documentation":"<FormTab> marks a tab within <TabbedForm>; its `value` prop is used as the tab identifier and to build the link/selector for syncWithLocation. Without it the tab cannot be identified, so the component throws at runtime (TypeScript also requires it, but JS usage or `any` casts bypass that).","triggerScenarios":"Rendering <FormTab label=\"...\"> inside <TabbedForm> without a `value` prop; spreading props where value is undefined; using FormTab in plain JavaScript where the missing prop isn't type-checked.","commonSituations":"Copying old react-admin v2/v3 examples where `path` was used instead of `value`; JS projects upgrading react-admin; dynamically generated tabs where a value key is accidentally omitted.","solutions":["Add a unique `value` prop to each FormTab: `<FormTab label=\"Main\" value=\"main\">`.","Ensure dynamically-built tabs always supply value (e.g. value={tab.name}).","If migrating from `path`, rename `path` to `value`."],"exampleFix":"// before\n<FormTab label=\"Main\">\n  ...\n</FormTab>\n\n// after\n<FormTab label=\"Main\" value=\"main\">\n  ...\n</FormTab>","handlingStrategy":"type-guard","validationCode":"tabs.forEach(tab => { if (tab.value == null) throw new Error('FormTab value required'); });","typeGuard":"const isValidFormTab = (p: { value?: string }): p is { value: string } => typeof p.value === 'string' && p.value.length > 0;","tryCatchPattern":null,"preventionTips":["Give every <FormTab> a unique, non-empty value prop.","In JS projects, add prop validation or migrate FormTab definitions to TS."],"tags":["react-admin","formtab","tabbedform","missing-props"],"backgroundTag":"required-prop-missing","analyzedSha":"051f511bb0afb5ea565c2d3728bf4dab0a6fa5e0","analyzedAt":"2026-08-30T02:28:14.926Z","schemaVersion":2},"datasetVersion":"2026-08-30T03:17:51.788Z"}