From 0de7198ffc614d4bd6b4dd922e1428ea596d546a Mon Sep 17 00:00:00 2001
From: Kermina Awad <kerminaawad@gmail.com>
Date: Thu, 10 Aug 2023 12:43:14 -0400
Subject: [PATCH] render all children regardless of type when using
 i18nIsDynamicList prop

---
 src/TransWithoutContext.js        |  7 ++++++-
 test/trans.render.dynamic.spec.js | 21 ++++++++++++++++++++-
 2 files changed, 26 insertions(+), 2 deletions(-)

diff --git a/src/TransWithoutContext.js b/src/TransWithoutContext.js
index c19edab59..94dd254f7 100644
--- a/src/TransWithoutContext.js
+++ b/src/TransWithoutContext.js
@@ -139,7 +139,12 @@ function renderNodes(children, targetString, i18n, i18nOptions, combinedTOpts, s
   function renderInner(child, node, rootReactNode) {
     const childs = getChildren(child);
     const mappedChildren = mapAST(childs, node.children, rootReactNode);
-    return hasValidReactChildren(childs) && mappedChildren.length === 0 ? childs : mappedChildren;
+    // `mappedChildren` will always be empty if using the `i18nIsDynamicList` prop,
+    // but the children might not necessarily be react components
+    return (hasValidReactChildren(childs) && mappedChildren.length === 0) ||
+      child.props?.i18nIsDynamicList
+      ? childs
+      : mappedChildren;
   }
 
   function pushTranslatedJSX(child, inner, mem, i, isVoid) {
diff --git a/test/trans.render.dynamic.spec.js b/test/trans.render.dynamic.spec.js
index b5e10a397..e0bb3fd9b 100644
--- a/test/trans.render.dynamic.spec.js
+++ b/test/trans.render.dynamic.spec.js
@@ -69,7 +69,7 @@ describe('Trans should render nested components', () => {
     `);
   });
 
-  it('should render dynamic content correctly', () => {
+  it('should render dynamic Elements correctly', () => {
     const dynamicContent = <div>testing</div>;
 
     function TestComponent() {
@@ -90,4 +90,23 @@ describe('Trans should render nested components', () => {
       </div>
     `);
   });
+
+  it('should render dynamic strings correctly', () => {
+    const dynamicContent = 'testing';
+
+    function TestComponent() {
+      return (
+        <Trans>
+          My dynamic content: <React.Fragment i18nIsDynamicList>{dynamicContent}</React.Fragment>
+        </Trans>
+      );
+    }
+    const { container } = render(<TestComponent />);
+    expect(container.firstChild).toMatchInlineSnapshot(`
+      <div>
+        My dynamic content: 
+        testing
+      </div>
+    `);
+  });
 });