Search code examples
reactjsreact-i18next

React 18 & react-i18next Trans component interpolation issue

I've just upgraded to react v18 but I get an error while doing interpolation using Trans component of react-i18next

<Trans i18nKey="pageNrOfAll" pageNr={pageNr} pagesCount={pagesCount}>
    Page
    <strong className="spacing">{{ pageNr }}</strong>
    of
    <strong className="spacing">{{ pagesCount }}</strong>
 </Trans>

enter image description here

Type '{ pageNr: number; }' is not assignable to type 'ReactNode'.
  Object literal may only specify known properties, and 'pageNr' does not exist in type 'ReactElement<any, string | JSXElementConstructor<any>> | ReactFragment | ReactPortal'.ts(2322)
index.d.ts(1375, 9): The expected type comes from property 'children' which is declared here on type 'DetailedHTMLProps<HTMLAttributes<HTMLElement>, HTMLElement>'

If I keep only one pair of brackets { pageNr } I get the following error

react-i18next:: Trans: the passed in value is invalid - seems you passed in a variable like {number} - please pass in variables for interpolation as full objects like {{number}}. 1

Solution

  • There’s an open issue here: https://github.com/i18next/react-i18next/issues/1483

    Just follow tge discussion there.