🐛 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
🐛 Bug Report
When passing number translation vars as children of
<Trans>component, the values cannot be properly formatted.Then passing the values as
varsprop 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
Expected behavior
Values passed as
<Trans>children are expected to be formatted properly.Your Environment