From e6b114a961c73448ad83655359a8ae3dcf0db7b6 Mon Sep 17 00:00:00 2001
From: Mednoob <ahmadyaqdhan123@gmail.com>
Date: Thu, 7 Mar 2024 14:26:12 +0900
Subject: [PATCH] fix: fix errors regarding key props

---
 src/components/Dropdown.tsx |  4 ++--
 src/pages/test.tsx          | 12 ++++++------
 2 files changed, 8 insertions(+), 8 deletions(-)

diff --git a/src/components/Dropdown.tsx b/src/components/Dropdown.tsx
index 5e22df7..6f6ebbf 100644
--- a/src/components/Dropdown.tsx
+++ b/src/components/Dropdown.tsx
@@ -12,8 +12,8 @@ export default function Dropdown({ head, items }: { head: ReactNode; items: Reac
             </div>
             {open && (
                 <div className="flex flex-col">
-                    {items.map(x => (
-                        <div className="border-l border-black ml-2 pl-2 hover:bg-white hover:bg-opacity-20">{x}</div>
+                    {items.map((x, i) => (
+                        <div key={i} className="border-l border-black ml-2 pl-2 hover:bg-white hover:bg-opacity-20">{x}</div>
                     ))}
                 </div>
             )}
diff --git a/src/pages/test.tsx b/src/pages/test.tsx
index 4805c97..a327e3c 100644
--- a/src/pages/test.tsx
+++ b/src/pages/test.tsx
@@ -3,13 +3,13 @@ import Dropdown from "../components/Dropdown";
 function SampleDropdown() {
     return (
         <Dropdown head="Schemas" items={[
-            <Dropdown head="Schema 1" items={[
-                <p>Table A</p>,
-                <p>Table B</p>
+            <Dropdown key={0} head="Schema 1" items={[
+                <p key={0}>Table A</p>,
+                <p key={1}>Table B</p>
             ]} />,
-            <Dropdown head="Schema 2" items={[
-                <p>Table User</p>,
-                <p>Table Player</p>
+            <Dropdown key={1} head="Schema 2" items={[
+                <p key={0}>Table User</p>,
+                <p key={1}>Table Player</p>
             ]} />
         ]} />
     )