Fix runtime error when a fragment contains exactly one child.

jameswilddev · Nov 25, 2021 · 16b9ad0 · 16b9ad0
1 parent 3f51e85
commit 16b9ad0
Show file tree

Hide file tree

Showing 2 changed files with 13 additions and 3 deletions.
diff --git a/utilities/flattenRenderedToArray/index.tsx b/utilities/flattenRenderedToArray/index.tsx
@@ -22,9 +22,15 @@ export const flattenRenderedToArray = (
       `type` in child &&
       child.type === React.Fragment
     ) {
-      return child.props.children
-        ? child.props.children.flatMap(recurseChildren)
-        : [];
+      if (child.props.children) {
+        if (Array.isArray(child.props.children)) {
+          return child.props.children.flatMap(recurseChildren);
+        } else {
+          return recurseChildren(child.props.children);
+        }
+      } else {
+        return [];
+      }
     } else {
       return [child];
     }

diff --git a/utilities/flattenRenderedToArray/unit.tsx b/utilities/flattenRenderedToArray/unit.tsx
@@ -41,6 +41,9 @@ test(`flattens elements`, () => {
           <Text key="z">Example Content O</Text>,
         ]}
       </div>
+      <React.Fragment>
+        <Text>Example Content P</Text>
+      </React.Fragment>
     </React.Fragment>
   );
 
@@ -75,5 +78,6 @@ test(`flattens elements`, () => {
         <Text key="z">Example Content O</Text>,
       ]}
     </div>,
+    <Text key="12">Example Content P</Text>,
   ]);
 });