Merge pull request #74 from joemaddalone/fix-nested-conditional

fix(nested-conditional): fixes nested & conditional rendering scenario

.gitignore

@@ -22,3 +22,5 @@ dist
 npm-debug.log*
 yarn-debug.log*
 yarn-error.log*
+
+.vscode

example/src/TestApp.js

@@ -21,7 +21,7 @@ const PathThree = ({ x, y, w, h, ...rest }) => {
     .toComponent(rest);
 };
 
-const App = () => {
+const App = ({ active }) => {
   return (
     <>
       <Svg width={300} height={300}>
@@ -35,7 +35,7 @@ const App = () => {
       <Svg width={200} height={200} className='nesting-example-1' scale>
         <PathMerge fill='none' stroke='black'>
           <RegPolygon size={120} sides={4} cx={100} cy={100}>
-            <Circle size={55} />
+            {active > 0 && <Circle size={55} />}
             <Square size={60} />
             <Circle size={25} cy={58} />
           </RegPolygon>

src/utils/render.js

@@ -13,13 +13,16 @@ const render = ({ pathMethod, attributes, ex, ey, sx, sy, children }) => {
   } else {
     return [
       pathMethod ? pathMethod()[to]({ ...cleanComponentProps, key: -1 }) : null,
-      React.Children.map(children, (child, i) =>
-        React.cloneElement(child, {
-          key: i,
-          merge,
-          ...attach(child.props, ex, ey, sx, sy)
-        })
-      )
+      React.Children.map(
+        children,
+        (child, i) =>
+          child &&
+          React.cloneElement(child, {
+            key: i,
+            merge,
+            ...attach(child.props, ex, ey, sx, sy)
+          })
+      ).filter((x) => x)
     ];
   }
 };