Merge pull request #1048 from Kiran-pande-30/unique_key_prop

Unique Key Prop in Sidebar
HimanshuNarware · Jun 23, 2024 · 9fea04c · 9fea04c
2 parents 88fd64d + 4b925d6
commit 9fea04c
Showing 1 changed file with 10 additions and 10 deletions.
diff --git a/frontend/src/Component/Sidebar/Sidebar.js b/frontend/src/Component/Sidebar/Sidebar.js
@@ -67,14 +67,15 @@ function Sidebar({ showSideNav }) {
       url: "/collaboration-tools",
     },
   ];
+
   return (
     <div className={`sidebar ${showSideNav ? "active" : ""}`}>
       <div
         className={`sidebar-content sidebar-btns ${
           showSideNav ? "active" : ""
         }`}
       >
-        <div className="sidebar-btn home-btn">
+        <div className="sidebar-btn home-btn" key="home">
           <Link
             to="/"
             className="Link  Bookmark nav-link active"
@@ -83,7 +84,7 @@ function Sidebar({ showSideNav }) {
             <AiFillHome /> Home
           </Link>
         </div>
-        <div className="sidebar-btn bookmark-btn">
+        <div className="sidebar-btn bookmark-btn" key="bookmark">
           <Link
             to="/bookmark"
             className="Link  Bookmark nav-link active"
@@ -92,7 +93,7 @@ function Sidebar({ showSideNav }) {
             <BsBookmark /> BookMark
           </Link>
         </div>
-        <div className="sidebar-btn home-btn">
+        <div className="sidebar-btn home-btn" key="about">
           <Link
             to="/about"
             className="Link  Bookmark nav-link active"
@@ -101,7 +102,7 @@ function Sidebar({ showSideNav }) {
             About Us
           </Link>
         </div>
-        <div className="sidebar-btn bookmark-btn">
+        <div className="sidebar-btn bookmark-btn" key="open-source">
           <Link
             to="/open-source"
             className="Link  Bookmark nav-link active"
@@ -111,26 +112,25 @@ function Sidebar({ showSideNav }) {
           </Link>
         </div>
       </div>
-      {sidebarContent.map((item, index) => (
+
+      {sidebarContent.map((item) => (
         <Link
           to={item.url}
-          id={index}
           className="Link  Bookmark nav-link active"
           aria-current="page"
+          key={item.name}
         >
           <SidebarContent
-            key={index}
             name={item.name}
             description={item.description}
             active={showSideNav}
           />
         </Link>
       ))}
-      <div style={{ marginTop: "20px" }} />
-      ))
+
       <div style={{ marginTop: "20px" }} />
     </div>
   );
 }
 
-export default Sidebar;
+export default Sidebar;