fix: filter children that are not valid

enijar · Jul 21, 2023 · 3821273 · 3821273
1 parent d041323
commit 3821273
Showing 1 changed file with 13 additions and 9 deletions.
diff --git a/src/components/layer.tsx b/src/components/layer.tsx
@@ -614,6 +614,13 @@ function Layer(
     };
   }, [ctx]);
 
+  const childs = React.useMemo(() => {
+    if (Array.isArray(children)) {
+      return children.filter((child) => React.isValidElement(child));
+    }
+    return React.isValidElement(children) ? children : [];
+  }, [children]);
+
   return (
     <LayerContext.Provider value={layerProviderValue}>
       <group
@@ -640,15 +647,12 @@ function Layer(
           />
         </mesh>
         <group renderOrder={renderOrder + zIndex + 1} ref={childrenGroupRef}>
-          {React.Children.map(children, (child, childIndex) => {
-            if (React.isValidElement(child)) {
-              return (
-                <group key={childIndex} ref={childGroupRefs[childIndex]}>
-                  {React.cloneElement(child, { ...child.props, childIndex })}
-                </group>
-              );
-            }
-            return child;
+          {React.Children.map(childs, (child, childIndex) => {
+            return (
+              <group key={childIndex} ref={childGroupRefs[childIndex]}>
+                {React.cloneElement(child, { ...child.props, childIndex })}
+              </group>
+            );
           })}
         </group>
       </group>