fix react key warning

visgl · Jan 5, 2020 · a82590a · a82590a
1 parent 5877187
commit a82590a
Show file tree

Hide file tree

Showing 2 changed files with 11 additions and 11 deletions.
diff --git a/modules/react/src/utils/position-children-under-views.js b/modules/react/src/utils/position-children-under-views.js
@@ -54,9 +54,8 @@ export default function positionChildrenUnderViews({children, viewports, deck, C
 
   // Render views
   return Object.keys(views).map(viewId => {
-    const {viewport} = views[viewId];
+    const {viewport, children: viewChildren} = views[viewId];
     const {x, y, width, height} = viewport;
-    let viewChildren = views[viewId].children;
     const style = {
       position: 'absolute',
       left: x,
@@ -66,6 +65,9 @@ export default function positionChildrenUnderViews({children, viewports, deck, C
     };
 
     const key = `view-${viewId}`;
+    // If children is passed as an array, React will throw the "each element in a list needs
+    // a key" warning. Sending each child as separate arguments removes this requirement.
+    const viewElement = createElement('div', {key, id: key, style}, ...viewChildren);
 
     if (ContextProvider) {
       const contextValue = {
@@ -77,9 +79,9 @@ export default function positionChildrenUnderViews({children, viewports, deck, C
           deck._onViewStateChange(params);
         }
       };
-      viewChildren = createElement(ContextProvider, {value: contextValue}, viewChildren);
+      return createElement(ContextProvider, {value: contextValue}, viewElement);
     }
 
-    return createElement('div', {key, id: key, style}, viewChildren);
+    return viewElement;
   });
 }
diff --git a/test/modules/react/utils/position-children-under-views.spec.js b/test/modules/react/utils/position-children-under-views.spec.js
@@ -76,7 +76,7 @@ test('positionChildrenUnderViews', t => {
   t.is(wrappedChild[1].props.id, 'element-without-view', 'element child preserves id');
 
   wrappedChild = children[1].props.children;
-  t.is(wrappedChild[0].props.id, 'element-under-view', 'element child preserves id');
+  t.is(wrappedChild.props.id, 'element-under-view', 'element child preserves id');
   t.end();
 });
 
@@ -94,12 +94,10 @@ test('positionChildrenUnderViews#ContextProvider', t => {
 
   t.is(children.length, 2, 'Returns wrapped children');
 
-  let wrappedChild = children[0].props.children;
-  t.is(wrappedChild.type, context.Provider, 'child is wrapped in ContextProvider');
-  t.is(wrappedChild.props.value.viewport, TEST_VIEWPORTS.map, 'Context has viewport');
+  t.is(children[0].type, context.Provider, 'child is wrapped in ContextProvider');
+  t.is(children[0].props.value.viewport, TEST_VIEWPORTS.map, 'Context has viewport');
 
-  wrappedChild = children[1].props.children;
-  t.is(wrappedChild.type, context.Provider, 'child is wrapped in ContextProvider');
-  t.is(wrappedChild.props.value.viewport, TEST_VIEWPORTS.ortho, 'Context has viewport');
+  t.is(children[1].type, context.Provider, 'child is wrapped in ContextProvider');
+  t.is(children[1].props.value.viewport, TEST_VIEWPORTS.ortho, 'Context has viewport');
   t.end();
 });