From 950f285d2eebd0203ca3a5fca44d1456765c1812 Mon Sep 17 00:00:00 2001
From: emizzle <ericmastro@status.im>
Date: Mon, 13 Aug 2018 23:28:17 +1000
Subject: [PATCH] =?UTF-8?q?Fix=20react=20=E2=80=98key=E2=80=99=20error?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 embark-ui/src/components/CompilerError.js   | 10 +++++-----
 embark-ui/src/containers/FiddleContainer.js |  3 ++-
 2 files changed, 7 insertions(+), 6 deletions(-)

diff --git a/embark-ui/src/components/CompilerError.js b/embark-ui/src/components/CompilerError.js
index 954cc892c..e0130b463 100644
--- a/embark-ui/src/components/CompilerError.js
+++ b/embark-ui/src/components/CompilerError.js
@@ -2,14 +2,14 @@ import React from 'react';
 import PropTypes from 'prop-types';
 import {Badge} from 'tabler-react';
 
-const CompilerError = ({key, onClick,  errorType, row, errorMessage}) => (
+const CompilerError = ({ index, onClick,  errorType, row, errorMessage}) => (
   <a 
     href="#editor"
     className="list-group-item list-group-item-action" 
     onClick={onClick}
-    key={key} 
+    key={index} 
     >
-    <Badge color={errorType === "error" ? "danger" : errorType} className="mr-1" key={key}>
+    <Badge color={errorType === "error" ? "danger" : errorType} className="mr-1" key={index}>
       Line {row}
     </Badge>
     {errorMessage}
@@ -17,10 +17,10 @@ const CompilerError = ({key, onClick,  errorType, row, errorMessage}) => (
 );
 
 CompilerError.propTypes = {
-  key: PropTypes.string,
+  index: PropTypes.number,
   onClick: PropTypes.func,
   errorType: PropTypes.string,
-  row: PropTypes.number,
+  row: PropTypes.string,
   errorMessage: PropTypes.string
 };
 
diff --git a/embark-ui/src/containers/FiddleContainer.js b/embark-ui/src/containers/FiddleContainer.js
index a0c370247..d43ce130b 100644
--- a/embark-ui/src/containers/FiddleContainer.js
+++ b/embark-ui/src/containers/FiddleContainer.js
@@ -48,7 +48,8 @@ class FiddleContainer extends Component {
             node: 
             <CompilerError
               onClick={(e) => { this._onErrorClick(e, annotation); }}
-              key={index}
+              key={`${errorType}_${index}`}
+              index={index}
               errorType={errorType}
               row={errorRowCol.row}
               errorMessage={error.formattedMessage}/>,