fix interpolation of the count prop #1719

i18next · Feb 6, 2024 · 2c4c4a7 · 2c4c4a7
1 parent 80c8f61
commit 2c4c4a7
Show file tree

Hide file tree

Showing 6 changed files with 48 additions and 5 deletions.
diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -1,3 +1,7 @@
+### 14.0.4
+
+- fix interpolation of the count prop [1719](https://github.com/i18next/react-i18next/issues/1719)
+
 ### 14.0.3
 
 - revert changes done in v14.0.2 since it breaks normal language change render updates

diff --git a/react-i18next.js b/react-i18next.js
@@ -480,7 +480,7 @@
 	      ...i18n.options.interpolation.defaultVariables
 	    };
 	  }
-	  const interpolationOverride = values ? tOptions.interpolation : {
+	  const interpolationOverride = values || count !== undefined ? tOptions.interpolation : {
 	    interpolation: {
 	      ...tOptions.interpolation,
 	      prefix: '#$?',

diff --git a/react-i18next.min.js b/react-i18next.min.js
diff --git a/src/TransWithoutContext.js b/src/TransWithoutContext.js
@@ -351,9 +351,10 @@ export function Trans({
         ? { ...values, ...i18n.options.interpolation.defaultVariables }
         : { ...i18n.options.interpolation.defaultVariables };
   }
-  const interpolationOverride = values
-    ? tOptions.interpolation
-    : { interpolation: { ...tOptions.interpolation, prefix: '#$?', suffix: '?$#' } };
+  const interpolationOverride =
+    values || count !== undefined
+      ? tOptions.interpolation
+      : { interpolation: { ...tOptions.interpolation, prefix: '#$?', suffix: '?$#' } };
   const combinedTOpts = {
     ...tOptions,
     count,

diff --git a/test/i18n.js b/test/i18n.js
@@ -54,6 +54,8 @@ i18n.init({
           deepKey1: 'value1',
         },
         transTestWithSelfClosing: 'interpolated component: <component/>',
+        bracketNotation: '{{count}}',
+        otherNotation: '#$?count?$#',
       },
       other: {
         transTest1: 'Another go <1>there</1>.',

diff --git a/test/trans.render.spec.jsx b/test/trans.render.spec.jsx
@@ -193,6 +193,42 @@ describe('trans simple with custom html tag', () => {
   });
 });
 
+describe('trans bracketNotation', () => {
+  function TestComponent() {
+    const numOfItems = 4;
+    return (
+      <Trans i18nKey="bracketNotation" count={numOfItems} />
+    );
+  }
+
+  it('should render correct content', () => {
+    const { container } = render(<TestComponent />);
+    expect(container.firstChild).toMatchInlineSnapshot(`
+      <div>
+        4
+      </div>
+    `);
+  });
+});
+
+describe('trans otherNotation', () => {
+  function TestComponent() {
+    const numOfItems = 4;
+    return (
+      <Trans i18nKey="otherNotation" count={numOfItems} />
+    );
+  }
+
+  it('should render correct content', () => {
+    const { container } = render(<TestComponent />);
+    expect(container.firstChild).toMatchInlineSnapshot(`
+      <div>
+        #$?count?$#
+      </div>
+    `);
+  });
+});
+
 describe('trans testTransKey1 singular', () => {
   function TestComponent() {
     const numOfItems = 1;