From 4f1ad266356bd770d9f55504a0c3db0bd2289ce9 Mon Sep 17 00:00:00 2001
From: Jeff Avallone <jeff.avallone@gmail.com>
Date: Mon, 28 Jan 2019 18:26:13 -0500
Subject: [PATCH] Refactoring to work with multiple children correctly

---
 src/components/Render/index.js | 19 ++++++++++++-------
 1 file changed, 12 insertions(+), 7 deletions(-)

diff --git a/src/components/Render/index.js b/src/components/Render/index.js
index 7664943..856d4d5 100644
--- a/src/components/Render/index.js
+++ b/src/components/Render/index.js
@@ -23,22 +23,21 @@ const renderDebug = ({ x, y, width, height, axisX1, axisX2, axisY }) => <>
   <circle style={ debugPin } cx={ axisX2 } cy={ axisY } r="3" />
 </>;
 
-const render = (data, extraProps) => {
+const render = (data, key) => {
   if (typeof data === 'string') {
     return data;
   }
 
   const { type, props, debug, box } = data;
-  const children = (data.children || []).map(
-    (data, key) => render(data, { key }));
+  const children = (data.children || []).map(render);
 
-  return <>
+  return <React.Fragment key={ key }>
     { React.createElement(
       nodeTypes[type] ? nodeTypes[type].default : type,
-      { ...extraProps, ...props },
+      props,
       children.length === 1 ? children[0] : children) }
     { debug && renderDebug(box) }
-  </>;
+  </React.Fragment>;
 };
 
 class Render extends React.PureComponent {
@@ -74,7 +73,13 @@ class Render extends React.PureComponent {
     const { data } = this.props;
 
     return <div className={ style.render } ref={ this.svgContainer }>
-      { render(data, { onReflow: this.provideSVGData }) }
+      { render({
+        ...data,
+        props: {
+          ...data.props,
+          onReflow: this.provideSVGData
+        }
+      }) }
     </div>;
   }
 }