{"record":{"id":"0f58fdafc31a6544","repo":"marmelab/react-admin","slug":"usetranslatablecontext-must-be-used-inside-a-trans","errorCode":null,"errorMessage":"useTranslatableContext must be used inside a TranslatableContextProvider","messagePattern":"useTranslatableContext must be used inside a TranslatableContextProvider","errorType":"exception","errorClass":"Error","httpStatus":null,"severity":"error","filePath":"packages/ra-core/src/i18n/useTranslatableContext.ts","lineNumber":40,"sourceCode":" *         selectLocale,\n *     } = useTranslatableContext();\n *\n *     return (\n *         <select onChange={selectLocale}>\n *             {locales.map((locale) => (\n *                 <option selected={locale.locale === selectedLocale}>\n *                     {locale.name}\n *                 </option>\n *             ))}\n *        </select>\n *     );\n * }\n */\nexport const useTranslatableContext = (): TranslatableContextValue => {\n    const context = useContext(TranslatableContext);\n\n    if (!context) {\n        throw new Error(\n            'useTranslatableContext must be used inside a TranslatableContextProvider'\n        );\n    }\n\n    return context;\n};\n","sourceCodeStart":22,"sourceCodeEnd":47,"githubUrl":"https://github.com/marmelab/react-admin/blob/051f511bb0afb5ea565c2d3728bf4dab0a6fa5e0/packages/ra-core/src/i18n/useTranslatableContext.ts#L22-L47","documentation":"useTranslatableContext gives access to the translatable fields context (locale selection, get/set locale) provided by <TranslatableContextProvider>. React-admin throws this error when the hook is called outside any component that rendered a TranslatableContextProvider, because the context value is undefined. It is a fail-fast guard instead of returning undefined and failing later with a confusing null reference.","triggerScenarios":"Calling useTranslatableContext() in a component that is not a descendant of <TranslatableContextProvider>, or inside a component rendered through a portal/iframe that escaped the provider tree.","commonSituations":"Building custom translatable inputs and reusing the hook outside <TranslatableInputs>; extracting an input into a standalone story/test page without the provider wrapper; moving a component out of the TranslatableInputs subtree during a refactor.","solutions":["Wrap the component (or its parent) in <TranslatableContextProvider> with locales, getLocale and setLocale props, or render it inside <TranslatableInputs> which supplies the provider.","If you only need locale handling, use useLocale/useLocales or your own state instead of the translatable context.","In tests/stories, add the provider to the decorators/wrapper before rendering the hook consumer."],"exampleFix":"// before\nconst MyTranslatableField = () => {\n    const { locales, getLocale, setLocale } = useTranslatableContext(); // throws\n    return null;\n};\n\n// after\nimport { TranslatableContextProvider } from 'ra-core';\nconst MyTranslatableField = () => {\n    const { locales, getLocale, setLocale } = useTranslatableContext();\n    return null;\n};\n<TranslatableContextProvider\n    value={{ locales, getLocale, setLocale }}\n>\n    <MyTranslatableField />\n</TranslatableContextProvider>;","handlingStrategy":"validation","validationCode":"import { useContext } from 'react';\nimport { TranslatableContext } from 'ra-core';\n// in the component, before using the hook's return:\nconst hasProvider = useContext(TranslatableContext) !== undefined;\nif (!hasProvider) throw new Error('MyTranslatableField requires <TranslatableContextProvider>');","typeGuard":"const hasTranslatableContext = (v: TranslatableContextValue | undefined): v is TranslatableContextValue => v != null;","tryCatchPattern":null,"preventionTips":["Render translatable inputs only inside <TranslatableInputs> or an explicit TranslatableContextProvider.","Add provider wrappers to storybook/test decorators for any component using the hook.","Watch for portal targets (ReactDOM.createPortal) that escape the provider tree."],"tags":["react","context","i18n","hooks"],"backgroundTag":"react-hook-outside-provider","analyzedSha":"051f511bb0afb5ea565c2d3728bf4dab0a6fa5e0","analyzedAt":"2026-08-30T02:28:14.926Z","schemaVersion":2},"datasetVersion":"2026-08-30T03:17:51.788Z"}