fix issue where component children would be removed when they are pas…

…sed to react component
i18next · Nov 29, 2024 · c05fc2a · c05fc2a
1 parent ae85abb
commit c05fc2a
Show file tree

Hide file tree

Showing 3 changed files with 65 additions and 2 deletions.
diff --git a/react-i18next.js b/react-i18next.js
@@ -476,7 +476,7 @@
 	      const comp = react.cloneElement(components[c], {
 	        key: componentKey
 	      });
-	      if (typeof comp.type === 'function' || !comp.props || !comp.props.children || translation.indexOf(`${c}/>`) < 0 && translation.indexOf(`${c} />`) < 0) return;
+	      if (!comp.props || !comp.props.children || translation.indexOf(`${c}/>`) < 0 && translation.indexOf(`${c} />`) < 0) return;
 	      function Componentized() {
 	        return react.createElement(react.Fragment, null, comp);
 	      }

diff --git a/src/TransWithoutContext.js b/src/TransWithoutContext.js
@@ -365,7 +365,6 @@ export function Trans({
       const componentKey = components[c].key || c;
       const comp = cloneElement(components[c], { key: componentKey });
       if (
-        typeof comp.type === 'function' ||
         !comp.props ||
         !comp.props.children ||
         (translation.indexOf(`${c}/>`) < 0 && translation.indexOf(`${c} />`) < 0)

diff --git a/test/trans.render.spec.jsx b/test/trans.render.spec.jsx
@@ -648,6 +648,70 @@ describe('trans should work with selfclosing elements in components', () => {
   });
 });
 
+describe('trans should work with self closing elements with react components', () => {
+  function Component({ children }) {
+    return <div>{children}</div>;
+  }
+  it('should render component children', () => {
+    const { container } = render(
+      <Trans
+        i18nKey="transTestWithSelfClosing"
+        components={{
+          component: <Component>These children will be preserved</Component>,
+        }}
+      />,
+    );
+    expect(container.firstChild).toMatchInlineSnapshot(`
+      <div>
+        interpolated component: 
+        <div>
+          These children will be preserved
+        </div>
+      </div>
+    `);
+  });
+  it('should render Link component children', () => {
+    const { container } = render(
+      <Trans
+        i18nKey="transTestWithSelfClosing"
+        components={{
+          component: <Link to="#">These children will be preserved</Link>,
+        }}
+      />,
+    );
+    expect(container.firstChild).toMatchInlineSnapshot(`
+      <div>
+        interpolated component: 
+        <a
+          href="#"
+        >
+          These children will be preserved
+        </a>
+      </div>
+    `);
+  });
+  it('should render anchor tag children', () => {
+    const { container } = render(
+      <Trans
+        i18nKey="transTestWithSelfClosing"
+        components={{
+          component: <a href="#">These children will be preserved</a>,
+        }}
+      />,
+    );
+    expect(container.firstChild).toMatchInlineSnapshot(`
+      <div>
+        interpolated component: 
+        <a
+          href="#"
+        >
+          These children will be preserved
+        </a>
+      </div>
+    `);
+  });
+});
+
 describe('trans with null child', () => {
   function TestComponent() {
     return (