EDSC-3910: Adding a unique identifier for key prop so component re-…

…mounts on each change to either variable
nasa · Nov 17, 2023 · 2ce8053 · 2ce8053
1 parent ab8a713
commit 2ce8053
Show file tree

Hide file tree

Showing 3 changed files with 4 additions and 3 deletions.
diff --git a/static/src/js/components/ProjectPanels/VariableTreePanel.js b/static/src/js/components/ProjectPanels/VariableTreePanel.js
@@ -24,6 +24,7 @@ export const VariableTreePanel = (props) => {
 
   const selectedMethod = accessMethods[selectedAccessMethod]
   const {
+    id: selectedAccessMethodServiceConceptId = '',
     keywordMappings = [],
     hierarchyMappings = [],
     selectedVariables = [],
@@ -81,7 +82,7 @@ export const VariableTreePanel = (props) => {
     <ProjectPanelSection heading="Variable Selection">
       {keywordMappings.length > 0 && hierarchyMappings.length > 0 && browseBy}
       <Tree
-        key={treeView}
+        key={`${selectedAccessMethodServiceConceptId}_${treeView}`}
         collectionId={collectionId}
         index={index}
         items={items}

diff --git a/static/src/js/components/Tree/Tree.js b/static/src/js/components/Tree/Tree.js
@@ -49,7 +49,7 @@ export const Tree = ({
       variables,
       onUpdateFinished: forceUpdate
     })
-  }, [variables]) // Update TreeModel when the list of variables changes
+  }, []) // Only execute this useEffect once on initial render
 
   /**
    * Update the treeModel with new values

diff --git a/static/src/js/util/tree/TreeNode.js b/static/src/js/util/tree/TreeNode.js
@@ -141,7 +141,7 @@ export class TreeNode {
   }
 
   /**
-   * Seralizes the selected items into an array of the fullValues
+   * Serializes the selected items into an array of the fullValues
    */
   seralize() {
     const checked = []