fix: Warnings on console

openedx · Mar 11, 2024 · 139e978 · 139e978
1 parent f808a84
commit 139e978
Show file tree

Hide file tree

Showing 2 changed files with 22 additions and 12 deletions.
diff --git a/src/content-tags-drawer/tags-sidebar/TagsSidebarBody.jsx b/src/content-tags-drawer/tags-sidebar/TagsSidebarBody.jsx
@@ -65,15 +65,15 @@ const TagsSidebarBody = () => {
             ? (
               <Stack>
                 {tree.map((taxonomy) => (
-                  <div>
+                  <div key={taxonomy.name}>
                     <Collapsible
                       className="tags-sidebar-taxonomy"
                       styling="card"
                       title={taxonomy.name}
                       iconWhenClosed={<Icon src={ArrowDropDown} />}
                       iconWhenOpen={<Icon src={ArrowDropUp} />}
                     >
-                      <TagsTree tags={taxonomy.tags} />
+                      <TagsTree tags={taxonomy.tags} parentKey={taxonomy.name} />
                     </Collapsible>
                   </div>
                 ))}

diff --git a/src/content-tags-drawer/tags-sidebar/TagsTree.jsx b/src/content-tags-drawer/tags-sidebar/TagsTree.jsx
@@ -2,24 +2,32 @@ import PropTypes from 'prop-types';
 import { Icon } from '@openedx/paragon';
 import { Tag } from '@openedx/paragon/icons';
 
-const TagsTree = ({ tags, rootDepth }) => {
+const TagsTree = ({ tags, rootDepth, parentKey }) => {
   if (Object.keys(tags).length === 0) {
     return null;
   }
 
-  // Generate tabs for the parents of this tree
-  const tabs = Array.from({
-    length: rootDepth,
-  }).map(() => <span className="d-inline-block ml-4" />);
+  // Used to Generate tabs for the parents of this tree
+  const tabsNumberArray = Array.from({ length: rootDepth }, (_, index) => index + 1);
 
   return (
-    <div className="tags-tree">
+    <div className="tags-tree" key={parentKey}>
       {Object.keys(tags).map((key) => (
-        <div className="mt-1.5 mb-1.5">
-          <div className="d-flex pl-2.5">
-            {tabs}<Icon src={Tag} className="mr-1 pb-1.5 text-info-500" />{key}
+        <div className="mt-1.5 mb-1.5" key={key}>
+          <div className="d-flex pl-2.5" key={key}>
+            {
+              tabsNumberArray.map((index) => <span className="d-inline-block ml-4" key={`${key}-${index}`} />)
+            }
+            <Icon src={Tag} className="mr-1 pb-1.5 text-info-500" />{key}
           </div>
-          { tags[key].children && <TagsTree tags={tags[key].children} rootDepth={rootDepth + 1} /> }
+          { tags[key].children
+            && (
+              <TagsTree
+                tags={tags[key].children}
+                rootDepth={rootDepth + 1}
+                parentKey={key}
+              />
+            )}
         </div>
       ))}
     </div>
@@ -28,11 +36,13 @@ const TagsTree = ({ tags, rootDepth }) => {
 
 TagsTree.propTypes = {
   tags: PropTypes.shape({}).isRequired,
+  parentKey: PropTypes.string,
   rootDepth: PropTypes.number,
 };
 
 TagsTree.defaultProps = {
   rootDepth: 0,
+  parentKey: undefined,
 };
 
 export default TagsTree;