From e28a084dbbae7178269208d5dbe2735c6a1657e0 Mon Sep 17 00:00:00 2001
From: Cole Lawrence <cole@colelawrence.com>
Date: Fri, 20 May 2022 12:02:38 -0400
Subject: [PATCH] fix(studio): Duplicate keys in NamespaceTree

---
 .../src/panels/OutlinePanel/ObjectsList/ObjectsList.tsx  | 9 +++++++--
 1 file changed, 7 insertions(+), 2 deletions(-)

diff --git a/theatre/studio/src/panels/OutlinePanel/ObjectsList/ObjectsList.tsx b/theatre/studio/src/panels/OutlinePanel/ObjectsList/ObjectsList.tsx
index 037e08f..10a3e38 100644
--- a/theatre/studio/src/panels/OutlinePanel/ObjectsList/ObjectsList.tsx
+++ b/theatre/studio/src/panels/OutlinePanel/ObjectsList/ObjectsList.tsx
@@ -40,10 +40,11 @@ function NamespaceTree(props: {
     <>
       {[...props.namespace.entries()].map(([label, {object, nested}]) => {
         const children = (
-          <>
+          <React.Fragment key={`${label} - ${props.visualIndentation}`}>
             {object && (
               <ObjectItem
                 depth={props.visualIndentation}
+                // key is useful for navigating react dev component tree
                 key={'objectPath(' + object.address.objectKey + ')'}
                 // object entries should not allow this to be undefined
                 sheetObject={object}
@@ -53,16 +54,20 @@ function NamespaceTree(props: {
             {nested && (
               <NamespaceTree
                 namespace={nested}
+                // Question: will there be key conflict if two components have the same labels?
+                key={'namespaceTree(' + label + ')'}
                 visualIndentation={props.visualIndentation + 1}
               />
             )}
-          </>
+          </React.Fragment>
         )
 
         return nested ? (
           <BaseItem
             selectionStatus="not-selectable"
             label={label}
+            // key necessary for no duplicate keys (next to other React.Fragments)
+            key={`baseItem(${label})`}
             depth={props.visualIndentation}
             children={children}
           />