Skip to content

Number vars passed as Trans children are not processed correctly #1754

Description

@vasiliy-l

🐛 Bug Report

When passing number translation vars as children of <Trans> component, the values cannot be properly formatted.
Then passing the values as vars prop of the component, the numbers are formatted as expected.

The bug appears in react-i18next version 14.0.7 and above. Probably, related to the fixes for #1729

To Reproduce

https://codesandbox.io/p/sandbox/react18next-trans-child-number-vars-not-formatted-cdx4f2

i18n.use(initReactI18next).init({
  resources: {
    en: {
      translation: {
        "trans-key-with-number-var": "Treat value as number: {{foo, number}}",
      },
    },
  },
 // ...
});

...

<Trans t={t} i18nKey="trans-key-with-number-var" values={{ foo: 1234 }} />
// OK
// > Treat value as number: 1,234

<Trans t={t} i18nKey="trans-key-with-number-var">
   {{ foo: 1234 }}
</Trans>
// Number value cannot be parsed properly:
// > Treat value as number: NaN

Expected behavior

Values passed as <Trans> children are expected to be formatted properly.

Your Environment

  • i18next version: i.e. 23.11.5
  • react-i18next version: 14.0.7

Metadata

Metadata

Assignees

No one assigned

    Labels

    No labels
    No labels

    Type

    No type

    Fields

    No fields configured for issues without a type.

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions