From 1de7c57b551b2c83eb0042a1622e9d1031781234 Mon Sep 17 00:00:00 2001
From: rmorshea <ryan.morshead@gmail.com>
Date: Mon, 19 Jul 2021 23:13:20 -0700
Subject: [PATCH] fix key warnings

---
 .../packages/idom-client-react/package.json   |  2 +-
 .../idom-client-react/src/component.js        | 35 ++++++++++---------
 2 files changed, 20 insertions(+), 17 deletions(-)

diff --git a/src/client/packages/idom-client-react/package.json b/src/client/packages/idom-client-react/package.json
index 42ffc6d46..48cd86a99 100644
--- a/src/client/packages/idom-client-react/package.json
+++ b/src/client/packages/idom-client-react/package.json
@@ -1,7 +1,7 @@
 {
   "name": "idom-client-react",
   "description": "A client for IDOM implemented in React",
-  "version": "0.8.3",
+  "version": "0.8.4",
   "author": "Ryan Morshead",
   "license": "MIT",
   "type": "module",
diff --git a/src/client/packages/idom-client-react/src/component.js b/src/client/packages/idom-client-react/src/component.js
index 9217985d6..a2f87ae42 100644
--- a/src/client/packages/idom-client-react/src/component.js
+++ b/src/client/packages/idom-client-react/src/component.js
@@ -28,7 +28,7 @@ export function Layout({ saveUpdateHook, sendEvent, loadImportSource }) {
   }
 }
 
-export function Element({ model, key }) {
+export function Element({ model }) {
   if (model.importSource) {
     return html`<${ImportedElement} model=${model} />`;
   } else {
@@ -36,21 +36,6 @@ export function Element({ model, key }) {
   }
 }
 
-export function elementChildren(modelChildren) {
-  if (!modelChildren) {
-    return [];
-  } else {
-    return modelChildren.map((child) => {
-      switch (typeof child) {
-        case "object":
-          return html`<${Element} key=${child.key} model=${child} />`;
-        case "string":
-          return child;
-      }
-    });
-  }
-}
-
 function StandardElement({ model }) {
   const config = react.useContext(LayoutConfigContext);
   const children = elementChildren(model.children);
@@ -116,6 +101,24 @@ function ImportedElement({ model }) {
   }
 }
 
+export function elementChildren(modelChildren) {
+  if (!modelChildren) {
+    return [];
+  } else {
+    return modelChildren.map((child, index) => {
+      switch (typeof child) {
+        case "object":
+          return html`<${Element}
+            key=${child.key || index.toString()}
+            model=${child}
+          />`;
+        case "string":
+          return child;
+      }
+    });
+  }
+}
+
 function elementAttributes(model, sendEvent) {
   const attributes = Object.assign({}, model.attributes);