From bed11010ff6a78974df924642fd99664a7e2c922 Mon Sep 17 00:00:00 2001
From: Ueki Chinos <megatzulkhairi@gmail.com>
Date: Tue, 9 Apr 2024 13:58:59 +0800
Subject: [PATCH] Fix issues

1. Each child in a list should have a unique "key" prop.
2. Found 3 elements with non-unique id #switch-round
---
 src/concepts/concept-1/sidebar/Sidebar.tsx |  1 +
 src/sidebars/sidebar-1/Sidebar.tsx         |  9 +++++----
 src/sidebars/sidebar-10/Sidebar.tsx        |  3 ++-
 src/sidebars/sidebar-2/Sidebar.tsx         |  1 +
 src/sidebars/sidebar-3/Sidebar.tsx         |  9 +++++----
 src/sidebars/sidebar-4/Sidebar.tsx         | 14 +++++++-------
 src/sidebars/sidebar-5/Sidebar.tsx         | 14 +++++++-------
 src/sidebars/sidebar-7/Sidebar.tsx         | 14 +++++++-------
 8 files changed, 35 insertions(+), 30 deletions(-)

diff --git a/src/concepts/concept-1/sidebar/Sidebar.tsx b/src/concepts/concept-1/sidebar/Sidebar.tsx
index 32a15a0..0262d53 100644
--- a/src/concepts/concept-1/sidebar/Sidebar.tsx
+++ b/src/concepts/concept-1/sidebar/Sidebar.tsx
@@ -72,6 +72,7 @@ export const Sidebar = ({
         {menuItems.map((item) => (
           <Button
             onClick={handleClick}
+            key={item.name}
             name={item.name}
             icon={item.icon}
             isActive={activeItem === item.name}
diff --git a/src/sidebars/sidebar-1/Sidebar.tsx b/src/sidebars/sidebar-1/Sidebar.tsx
index e9883e3..b51f2a7 100644
--- a/src/sidebars/sidebar-1/Sidebar.tsx
+++ b/src/sidebars/sidebar-1/Sidebar.tsx
@@ -94,7 +94,7 @@ export const Sidebar = () => {
       <nav className="sidebar-nav">
         <NavHeader />
         {menuItems.map((item) => (
-          <>
+          <div key={`a_${item.name}`}>
             {!item.items && (
               <NavButton
                 onClick={handleClick}
@@ -105,7 +105,7 @@ export const Sidebar = () => {
               />
             )}
             {item.items && (
-              <>
+              <div key={`b_${item.name}`}>
                 <NavButton
                   onClick={handleClick}
                   name={item.name}
@@ -121,14 +121,15 @@ export const Sidebar = () => {
                   {item.items.map((subItem) => (
                     <NavButton
                       onClick={handleClick}
+                      key={`c_${subItem}`}
                       name={subItem}
                       isActive={activeItem === subItem}
                     />
                   ))}
                 </div>
-              </>
+              </div>
             )}
-          </>
+          </div>
         ))}
       </nav>
     </aside>
diff --git a/src/sidebars/sidebar-10/Sidebar.tsx b/src/sidebars/sidebar-10/Sidebar.tsx
index 931f6ee..c643f76 100644
--- a/src/sidebars/sidebar-10/Sidebar.tsx
+++ b/src/sidebars/sidebar-10/Sidebar.tsx
@@ -100,6 +100,7 @@ const SubMenu: FC<SubMenuProps> = ({ item, activeItem, handleClick }) => {
       <div ref={navRef} className="sub-nav-inner">
         {item?.items.map((subItem) => (
           <NavButton
+            key={subItem}
             onClick={handleClick}
             name={subItem}
             isActive={activeItem === subItem}
@@ -122,7 +123,7 @@ export const Sidebar = () => {
     <aside className="sidebar">
       <NavHeader />
       {menuItems.map((item) => (
-        <div>
+        <div key={item.name}>
           {!item.items && (
             <NavButton
               onClick={handleClick}
diff --git a/src/sidebars/sidebar-2/Sidebar.tsx b/src/sidebars/sidebar-2/Sidebar.tsx
index 0de5dbb..ce77e8e 100644
--- a/src/sidebars/sidebar-2/Sidebar.tsx
+++ b/src/sidebars/sidebar-2/Sidebar.tsx
@@ -67,6 +67,7 @@ export const Sidebar = () => {
         {menuItems.map((item) => (
           <Button
             onClick={handleClick}
+            key={item.name}
             name={item.name}
             icon={item.icon}
             isActive={activeItem === item.name}
diff --git a/src/sidebars/sidebar-3/Sidebar.tsx b/src/sidebars/sidebar-3/Sidebar.tsx
index bd8e487..8684c83 100644
--- a/src/sidebars/sidebar-3/Sidebar.tsx
+++ b/src/sidebars/sidebar-3/Sidebar.tsx
@@ -111,6 +111,7 @@ const SubMenu: FC<SubMenuProps> = ({ item, activeItem, handleClick }) => {
           <NavButton
             onClick={handleClick}
             name={subItem}
+            key={subItem}
             isActive={activeItem === subItem}
           />
         ))}
@@ -131,7 +132,7 @@ export const Sidebar = () => {
     <aside className="sidebar">
       <NavHeader />
       {menuItems.map((item) => (
-        <>
+        <div key={item.name}>
           {!item.items && (
             <NavButton
               onClick={handleClick}
@@ -142,7 +143,7 @@ export const Sidebar = () => {
             />
           )}
           {item.items && (
-            <>
+            <div key={item.name}>
               <NavButton
                 onClick={handleClick}
                 name={item.name}
@@ -155,9 +156,9 @@ export const Sidebar = () => {
                 handleClick={handleClick}
                 item={item}
               />
-            </>
+            </div>
           )}
-        </>
+        </div>
       ))}
     </aside>
   );
diff --git a/src/sidebars/sidebar-4/Sidebar.tsx b/src/sidebars/sidebar-4/Sidebar.tsx
index 4700bfb..c93be4a 100644
--- a/src/sidebars/sidebar-4/Sidebar.tsx
+++ b/src/sidebars/sidebar-4/Sidebar.tsx
@@ -102,7 +102,7 @@ export const Sidebar = () => {
         >
           <div>
             {menuItems.map((item) => (
-              <NavButton name={item.name} icon={item.icon} />
+              <NavButton key={item.name} name={item.name} icon={item.icon} />
             ))}
           </div>
           <div>
@@ -128,22 +128,22 @@ export const Sidebar = () => {
               <div className="row">
                 <div className="switch-label">Dark Mode</div>
                 <span className="switch">
-                  <input id="switch-round" type="checkbox" />
-                  <label htmlFor="switch-round"></label>
+                  <input id="switch-round1" type="checkbox" />
+                  <label htmlFor="switch-round1"></label>
                 </span>
               </div>
               <div className="row">
                 <div className="switch-label">Accessibility Mode</div>
                 <span className="switch">
-                  <input id="switch-round" type="checkbox" />
-                  <label htmlFor="switch-round"></label>
+                  <input id="switch-round2" type="checkbox" />
+                  <label htmlFor="switch-round2"></label>
                 </span>
               </div>
               <div className="row">
                 <div className="switch-label">Quirks Mode</div>
                 <span className="switch">
-                  <input id="switch-round" type="checkbox" />
-                  <label htmlFor="switch-round"></label>
+                  <input id="switch-round3" type="checkbox" />
+                  <label htmlFor="switch-round3"></label>
                 </span>
               </div>
             </form>
diff --git a/src/sidebars/sidebar-5/Sidebar.tsx b/src/sidebars/sidebar-5/Sidebar.tsx
index 003a3bb..4866c9c 100644
--- a/src/sidebars/sidebar-5/Sidebar.tsx
+++ b/src/sidebars/sidebar-5/Sidebar.tsx
@@ -105,7 +105,7 @@ export const Sidebar = () => {
           <Tab isActive={activeTab === 0}>
             <div>
               {menuItems.map((item) => (
-                <NavButton name={item.name} icon={item.icon} />
+                <NavButton key={item.name} name={item.name} icon={item.icon} />
               ))}
             </div>
           </Tab>
@@ -135,22 +135,22 @@ export const Sidebar = () => {
                 <div className="row">
                   <div className="switch-label">Dark Mode</div>
                   <span className="switch">
-                    <input id="switch-round" type="checkbox" />
-                    <label htmlFor="switch-round"></label>
+                    <input id="switch-round1" type="checkbox" />
+                    <label htmlFor="switch-round1"></label>
                   </span>
                 </div>
                 <div className="row">
                   <div className="switch-label">Accessibility Mode</div>
                   <span className="switch">
-                    <input id="switch-round" type="checkbox" />
-                    <label htmlFor="switch-round"></label>
+                    <input id="switch-round2" type="checkbox" />
+                    <label htmlFor="switch-round2"></label>
                   </span>
                 </div>
                 <div className="row">
                   <div className="switch-label">Quirks Mode</div>
                   <span className="switch">
-                    <input id="switch-round" type="checkbox" />
-                    <label htmlFor="switch-round"></label>
+                    <input id="switch-round3" type="checkbox" />
+                    <label htmlFor="switch-round3"></label>
                   </span>
                 </div>
               </form>
diff --git a/src/sidebars/sidebar-7/Sidebar.tsx b/src/sidebars/sidebar-7/Sidebar.tsx
index 21c132b..2c64e90 100644
--- a/src/sidebars/sidebar-7/Sidebar.tsx
+++ b/src/sidebars/sidebar-7/Sidebar.tsx
@@ -90,7 +90,7 @@ export const Sidebar = () => {
         >
           <div>
             {menuItems.map((item) => (
-              <NavButton name={item.name} icon={item.icon} />
+              <NavButton key={item.name} name={item.name} icon={item.icon} />
             ))}
           </div>
           <div>
@@ -116,22 +116,22 @@ export const Sidebar = () => {
               <div className="row">
                 <div className="switch-label">Dark Mode</div>
                 <span className="switch">
-                  <input id="switch-round" type="checkbox" />
-                  <label htmlFor="switch-round"></label>
+                  <input id="switch-round1" type="checkbox" />
+                  <label htmlFor="switch-round1"></label>
                 </span>
               </div>
               <div className="row">
                 <div className="switch-label">Accessibility Mode</div>
                 <span className="switch">
-                  <input id="switch-round" type="checkbox" />
-                  <label htmlFor="switch-round"></label>
+                  <input id="switch-round2" type="checkbox" />
+                  <label htmlFor="switch-round2"></label>
                 </span>
               </div>
               <div className="row">
                 <div className="switch-label">Quirks Mode</div>
                 <span className="switch">
-                  <input id="switch-round" type="checkbox" />
-                  <label htmlFor="switch-round"></label>
+                  <input id="switch-round3" type="checkbox" />
+                  <label htmlFor="switch-round3"></label>
                 </span>
               </div>
             </form>