From 449eb707d11115eeb942d17fd85abb55b6a37ddb Mon Sep 17 00:00:00 2001
From: Joost De Cock <joost@decock.org>
Date: Sun, 29 Sep 2019 14:01:21 +0200
Subject: [PATCH] :bug: Fixed conflicting key values in React components

---
 .../src/Draft/Defs/Snippets/index.js          | 81 +++++--------------
 .../components/src/Draft/DesignPath/index.js  | 50 ++++++------
 2 files changed, 46 insertions(+), 85 deletions(-)

diff --git a/packages/components/src/Draft/Defs/Snippets/index.js b/packages/components/src/Draft/Defs/Snippets/index.js
index c976d93c63a..31625ca7649 100644
--- a/packages/components/src/Draft/Defs/Snippets/index.js
+++ b/packages/components/src/Draft/Defs/Snippets/index.js
@@ -1,9 +1,9 @@
-import React from "react";
-import logoPathString from "./logo-path";
+import React from 'react'
+import logoPathString from './logo-path'
 
 const Snippets = props => {
-  const fill = { fill: "currentColor", stroke: "none" };
-  const stroke = { fill: "none", stroke: "currentColor" };
+  const fill = { fill: 'currentColor', stroke: 'none' }
+  const stroke = { fill: 'none', stroke: 'currentColor' }
   return [
     <g id="notch" className="snippet notch" key="notch">
       <circle cy="0" cx="0" r="1.4" {...fill} />
@@ -22,73 +22,32 @@ const Snippets = props => {
     </g>,
     <g id="buttonhole" className="snippet buttonhole" key="buttonhole">
       <path d="M -1,-5 L 1,-5 L 1,5 L -1,5 z" {...stroke} />
-      <path
-        d="M -1,-5 L 1,-5 L 1,-4 L -1,-4 z M -1,5 L 1,5 L 1,4 L -1,4 z"
-        {...fill}
-      />
+      <path d="M -1,-5 L 1,-5 L 1,-4 L -1,-4 z M -1,5 L 1,5 L 1,4 L -1,4 z" {...fill} />
     </g>,
-    <radialGradient
-      id="snap-male-grad"
-      cx="50%"
-      cy="50%"
-      r="50%"
-      fx="50%"
-      fy="50%"
-    >
-      <stop
-        offset="30%"
-        style={{ stopColor: "rgb(235,235,235)", stopOpacity: 1 }}
-      />
-      <stop
-        offset="80%"
-        style={{ stopColor: "rgb(100,100,100)", stopOpacity: 1 }}
-      />
+    <radialGradient key="grad" id="snap-male-grad" cx="50%" cy="50%" r="50%" fx="50%" fy="50%">
+      <stop offset="30%" style={{ stopColor: 'rgb(235,235,235)', stopOpacity: 1 }} />
+      <stop offset="80%" style={{ stopColor: 'rgb(100,100,100)', stopOpacity: 1 }} />
     </radialGradient>,
-    <g id="snap-male">
-      <circle
-        cx="0"
-        cy="0"
-        r="3.4"
-        style={{ stroke: "#666", fill: "#dddddd", strokeWidth: 0.3 }}
-      />
-      <circle
-        cx="0"
-        cy="0"
-        r="1.8"
-        style={{ stroke: "none", fill: "url(#snap-male-grad)" }}
-      />
+    <g id="snap-male" key="snapmale">
+      <circle cx="0" cy="0" r="3.4" style={{ stroke: '#666', fill: '#dddddd', strokeWidth: 0.3 }} />
+      <circle cx="0" cy="0" r="1.8" style={{ stroke: 'none', fill: 'url(#snap-male-grad)' }} />
       <path
-        style={{ fill: "none", stroke: "#666", strokeWidth: 0.2 }}
+        style={{ fill: 'none', stroke: '#666', strokeWidth: 0.2 }}
         d="M -2,0 L -3,0 M 2,0 L 3,0 M 0,2 L 0,3 M 0,-2 L 0,-3 M 1.5,1.5 L 2.1,2.1 M -1.5,1.5 L -2.1,2.1 M -1.5,-1.5 L -2.1,-2.1 M 1.5,-1.5 L 2.1,-2.1"
       />
     </g>,
-    <g id="snap-female">
-      <circle
-        cx="0"
-        cy="0"
-        r="3.4"
-        style={{ stroke: "#666", fill: "#bbbbbb", strokeWidth: 0.3 }}
-      />
-      <circle
-        cx="0"
-        cy="0"
-        r="2"
-        style={{ stroke: "#666", fill: "#dddddd", strokeWidth: 0.4 }}
-      />
+    <g id="snap-female" key="snapfemale">
+      <circle cx="0" cy="0" r="3.4" style={{ stroke: '#666', fill: '#bbbbbb', strokeWidth: 0.3 }} />
+      <circle cx="0" cy="0" r="2" style={{ stroke: '#666', fill: '#dddddd', strokeWidth: 0.4 }} />
       <path
-        style={{ fill: "none", stroke: "#666", strokeWidth: 0.5 }}
+        style={{ fill: 'none', stroke: '#666', strokeWidth: 0.5 }}
         d="M -1.7,-1 L -1.7,1 M 1.7,-1 L 1.7,1"
       />
     </g>,
-    <g
-      id="logo"
-      className="snippet logo"
-      transform="translate(-23 -36)"
-      key="logo"
-    >
+    <g id="logo" className="snippet logo" transform="translate(-23 -36)" key="logo">
       <path d={logoPathString} {...fill} />
     </g>
-  ];
-};
+  ]
+}
 
-export default Snippets;
+export default Snippets
diff --git a/packages/components/src/Draft/DesignPath/index.js b/packages/components/src/Draft/DesignPath/index.js
index ef2cec5813a..e2a8a60886a 100644
--- a/packages/components/src/Draft/DesignPath/index.js
+++ b/packages/components/src/Draft/DesignPath/index.js
@@ -1,55 +1,57 @@
-import React from "react";
+import React from 'react'
 
 const DesignPath = props => {
-  let output = [];
-  let i = 0;
-  let from = null;
+  console.log('design path props', props)
+  let output = []
+  let i = 0
+  let from = null
   for (let op of props.path.ops) {
-    if (op.type === "curve") {
+    let key = props.part + props.name + i
+    if (op.type === 'curve') {
       output.push(
         <path
-          key={i}
+          key={key + 'cp1'}
           d={`M ${from.x},${from.y} L ${op.cp1.x},${op.cp1.y}`}
           className="design path cp"
         />
-      );
-      i++;
+      )
+      i++
       output.push(
         <path
-          key={i}
+          key={key + 'cp2'}
           d={`M ${op.to.x},${op.to.y} L ${op.cp2.x},${op.cp2.y}`}
           className="design path cp"
         />
-      );
-      i++;
+      )
+      i++
       output.push(
         <circle
-          key={i}
+          key={key + 'cpcirc1'}
           cx={op.cp1.x}
           cy={op.cp1.y}
           r={3.5}
           className="design path cp"
         />
-      );
-      i++;
+      )
+      i++
       output.push(
         <circle
-          key={i}
+          key={key + 'cpcirc2'}
           cx={op.cp2.x}
           cy={op.cp2.y}
           r={3.5}
           className="design path cp"
         />
-      );
-      from = op.to;
-    } else if (op.type !== "close") from = op.to;
+      )
+      from = op.to
+    } else if (op.type !== 'close') from = op.to
   }
   output.push(
     <path
-      key={"dpath-" + props.name}
+      key={props.part + props.name + 'dpath'}
       d={props.path.asPathstring()}
       onClick={() =>
-        props.raiseEvent("path", {
+        props.raiseEvent('path', {
           path: props.path,
           name: props.name,
           part: props.part
@@ -57,8 +59,8 @@ const DesignPath = props => {
       }
       className="design hovertrap"
     />
-  );
-  return output;
-};
+  )
+  return output
+}
 
-export default DesignPath;
+export default DesignPath