From 608f50ae1c4f6273e445be3a2c73e8bc9588089c Mon Sep 17 00:00:00 2001
From: Daniel Kaspo <danielkaspo@gmail.com>
Date: Wed, 31 May 2017 20:46:03 -0400
Subject: [PATCH] Added keys for bolding and linking for markup.js

If you were to mix-and-match or use multiple markdown elements in one
string, this would cause a React key error. This fixes it by key-ing all
the things!
---
 common/translations/markup.js    |  8 ++++++--
 spec/translations/markup.spec.js | 26 +++++++++++++-------------
 2 files changed, 19 insertions(+), 15 deletions(-)

diff --git a/common/translations/markup.js b/common/translations/markup.js
index 5cf096d1..4ac25947 100644
--- a/common/translations/markup.js
+++ b/common/translations/markup.js
@@ -19,10 +19,12 @@ function linkify(mdString: string) {
         return decodeHTMLEntities(parts[0]);
     }
     const result = [];
+    let key = 0;
     let i = 0;
     while (i + 1 < parts.length) {
         result.push(decodeHTMLEntities(parts[i]));
-        result.push(<a key={'linkify-' + i} href={parts[i + 2]} target="_blank">{parts[i + 1]}</a>);
+        result.push(<a key={'linkify-' + key} href={parts[i + 2]} target="_blank">{parts[i + 1]}</a>);
+        key++;
         i += 3;
     }
     result.push(decodeHTMLEntities(parts[parts.length - 1]));
@@ -35,10 +37,12 @@ export function markupToReact(mdString: string) {
         return linkify(parts[0]);
     }
     let result = [];
+    let key = 0;
     let i = 0;
     while (i + 1 < parts.length) {
         result = result.concat(linkify(parts[i]));
-        result.push(<b>{parts[i + 2]}</b>);
+        result.push(<b key={'boldify-' + key}>{parts[i + 2]}</b>);
+        key++;
         i += 3;
     }
     result = result.concat(linkify(parts.pop()));
diff --git a/spec/translations/markup.spec.js b/spec/translations/markup.spec.js
index 9c4427ac..9476eebd 100644
--- a/spec/translations/markup.spec.js
+++ b/spec/translations/markup.spec.js
@@ -10,47 +10,47 @@ describe('markupToReact', () => {
 
     it('transforms bold syntax', () => {
         let value = '**foo**';
-        let expected = [<b>foo</b>];
+        let expected = [<b key="boldify-0">foo</b>];
         expect(markupToReact(value)).toEqual(expected);
 
         value = '**foo** bar';
-        expected = [<b>foo</b>, ' bar'];
+        expected = [<b key="boldify-0">foo</b>, ' bar'];
         expect(markupToReact(value)).toEqual(expected);
 
         value = 'bar **foo**';
-        expected = ['bar ', <b>foo</b>];
+        expected = ['bar ', <b key="boldify-0">foo</b>];
         expect(markupToReact(value)).toEqual(expected);
 
         value = 'bar **foo** baz';
-        expected = ['bar ', <b>foo</b>, ' baz'];
+        expected = ['bar ', <b key="boldify-0">foo</b>, ' baz'];
         expect(markupToReact(value)).toEqual(expected);
 
         value = '**foo****bar**';
-        expected = [<b>foo</b>, <b>bar</b>];
+        expected = [<b key="boldify-0">foo</b>, <b key="boldify-1">bar</b>];
         expect(markupToReact(value)).toEqual(expected);
     });
 
     it('transforms link syntax', () => {
         let value = '[foo](http://google.com)';
-        let expected = [<a href="http://google.com" target="_blank">foo</a>];
+        let expected = [<a key="linkify-0" href="http://google.com" target="_blank">foo</a>];
         expect(markupToReact(value)).toEqual(expected);
 
         value = '[foo](http://google.com) bar';
-        expected = [<a href="http://google.com" target="_blank">foo</a>, ' bar'];
+        expected = [<a key="linkify-0" href="http://google.com" target="_blank">foo</a>, ' bar'];
         expect(markupToReact(value)).toEqual(expected);
 
         value = 'bar [foo](http://google.com)';
-        expected = ['bar ', <a href="http://google.com" target="_blank">foo</a>];
+        expected = ['bar ', <a key="linkify-0" href="http://google.com" target="_blank">foo</a>];
         expect(markupToReact(value)).toEqual(expected);
 
         value = 'bar [foo](http://google.com) baz';
-        expected = ['bar ', <a href="http://google.com" target="_blank">foo</a>, ' baz'];
+        expected = ['bar ', <a key="linkify-0" href="http://google.com" target="_blank">foo</a>, ' baz'];
         expect(markupToReact(value)).toEqual(expected);
 
         value = '[foo](http://google.com)[bar](http://google.ca)';
         expected = [
-            <a href="http://google.com" target="_blank">foo</a>,
-            <a href="http://google.ca" target="_blank">bar</a>
+            <a key="linkify-0" href="http://google.com" target="_blank">foo</a>,
+            <a key="linkify-1" href="http://google.ca" target="_blank">bar</a>
         ];
         expect(markupToReact(value)).toEqual(expected);
     });
@@ -59,9 +59,9 @@ describe('markupToReact', () => {
         let value = 'Bold **foo** link [foo](http://google.com) text';
         let expected = [
             'Bold ',
-            <b>foo</b>,
+            <b key="boldify-0">foo</b>,
             ' link ',
-            <a href="http://google.com" target="_blank">foo</a>,
+            <a key="linkify-0" href="http://google.com" target="_blank">foo</a>,
             ' text'
         ];
         expect(markupToReact(value)).toEqual(expected);