From c243a62a32e5a4406e420e63433c30ea666a1c24 Mon Sep 17 00:00:00 2001
From: Andrey Okonetchnikov <andrej.okonetschnikow@gmail.com>
Date: Thu, 22 Sep 2016 18:23:44 +0200
Subject: [PATCH] Generate keys for arrays of elements to remove React
 warnings. Pass only a single child if possible.

---
 src/components/Widgets/MarkitupReactRenderer.js | 11 ++++++++---
 1 file changed, 8 insertions(+), 3 deletions(-)

diff --git a/src/components/Widgets/MarkitupReactRenderer.js b/src/components/Widgets/MarkitupReactRenderer.js
index 4f291cf2..d8f226a7 100644
--- a/src/components/Widgets/MarkitupReactRenderer.js
+++ b/src/components/Widgets/MarkitupReactRenderer.js
@@ -21,21 +21,26 @@ const defaultRenderers = {
   'unstyled': null,
 };
 
-function renderToken(token) {
+function renderToken(token, index = 0, key = '0') {
   const { type, data, text, tokens } = token;
   const element = defaultRenderers[type];
+  key = `${key}.${index}`;
 
   // Only render if type is registered as renderer
   if (typeof element !== 'undefined') {
     let children = null;
     if (Array.isArray(tokens) && tokens.length) {
-      children = tokens.map(renderToken);
+      children = tokens.map((token, idx) => renderToken(token, idx, key));
     } else if (type === 'text') {
       children = text;
     }
     if (element !== null) {
       // If this is a react element
-      return React.createElement(element, data, children);
+      return React.createElement(
+        element,
+        { key, ...data }, // Add key as a prop
+        Array.isArray(children) && children.length === 1
+          ? children[0] : children); // Pass single child if possible
     } else {
       // If this is a text node
       return children;