{"record":{"id":"843a2169cef417f1","repo":"facebook/docusaurus","slug":"the-docusaurus-interpolate-component-only-accept","errorCode":null,"errorMessage":"The Docusaurus <Interpolate> component only accept simple string values. Received: ${isValidElement(children) ? 'React element' : typeof children}","messagePattern":"The Docusaurus <Interpolate> component only accept simple string values\\. Received: (.+?)","errorType":"exception","errorClass":"Error","httpStatus":null,"severity":"error","filePath":"packages/docusaurus/src/client/exports/Interpolate.tsx","lineNumber":63,"sourceCode":"    }\n    return seg;\n  });\n  if (segments.some((seg) => isValidElement(seg))) {\n    return segments\n      .map((seg, index) =>\n        isValidElement(seg) ? React.cloneElement(seg, {key: index}) : seg,\n      )\n      .filter((seg) => seg !== '');\n  }\n  return segments.join('');\n}\n\nexport default function Interpolate<Str extends string>({\n  children,\n  values,\n}: InterpolateProps<Str>): ReactNode {\n  if (typeof children !== 'string') {\n    throw new Error(\n      `The Docusaurus <Interpolate> component only accept simple string values. Received: ${\n        isValidElement(children) ? 'React element' : typeof children\n      }`,\n    );\n  }\n  return <>{interpolate(children, values)}</>;\n}\n","sourceCodeStart":45,"sourceCodeEnd":71,"githubUrl":"https://github.com/facebook/docusaurus/blob/3f483e80e326cc646b54b83d564b3f0c4881b9a6/packages/docusaurus/src/client/exports/Interpolate.tsx#L45-L71","documentation":"<Interpolate> is a minimal string-templating component: its children must be a plain string containing {placeholder} markers, and values supplies the replacements. If children is not a string (a React element, number, etc.) it throws and reports the received type. To embed JSX, put the element into the values map and reference it by placeholder, not as children.","triggerScenarios":"Render <Interpolate values={{icon:<Icon/>}}>{<Icon/>} Hello</Interpolate>; pass a number or boolean as children; nest another component as children.","commonSituations":"Confusing Interpolate with a generic JSX wrapper; trying to translate rich content; refactoring a Translate/Interpolate call and dropping the template string.","solutions":["Keep children as a string template: <Interpolate values={{name}}>Hello, {\"{name}\"}</Interpolate>.","Move JSX into the values object: values={{icon: <Icon/>}} and reference {icon} inside the string.","If you need full rich-text translation, split into multiple <Translate> strings around the JSX."],"exampleFix":"// before\n<Interpolate values={{name}}>\n  Hello, <b>{name}</b>\n</Interpolate>\n// after\n<Interpolate values={{name}}>\n  {\"Hello, {name}\"}\n</Interpolate>","handlingStrategy":"type-guard","validationCode":"function assertInterpolateChildren(children: unknown) {\n  if (typeof children !== 'string') {\n    throw new Error(\n      '<Interpolate> children must be a string template',\n    );\n  }\n}","typeGuard":"const isInterpolatableString = (c: unknown): c is string =>\n  typeof c === 'string';","tryCatchPattern":null,"preventionTips":["Reserve <Interpolate> children for string templates only; move JSX into values.","If you need rich content, split into multiple strings around the JSX.","Type your wrapper to require children: string."],"tags":["i18n","interpolate","react","props-validation"],"backgroundTag":null,"analyzedSha":"3f483e80e326cc646b54b83d564b3f0c4881b9a6","analyzedAt":"2026-08-12T13:25:04.382Z","schemaVersion":2},"datasetVersion":"2026-08-12T18:17:37.767Z"}