From 7d049af52dedbe5cc7ae0030c4072446641c092e Mon Sep 17 00:00:00 2001
From: sigmasternchen <git@sigma-star.io>
Date: Fri, 20 Sep 2024 20:12:57 +0200
Subject: [PATCH] fix: missing keys in react array

---
 src/components/Field.jsx    | 3 ++-
 src/components/Keyboard.jsx | 5 +++--
 2 files changed, 5 insertions(+), 3 deletions(-)

diff --git a/src/components/Field.jsx b/src/components/Field.jsx
index 1137b87..b4aeee9 100644
--- a/src/components/Field.jsx
+++ b/src/components/Field.jsx
@@ -10,10 +10,11 @@ export const Field = ({size, fieldData}) => {
             range(size[1]).map(y =>
                 range(size[0]).map(x => (
                     <Cell
+                        key={x + "-" + "y"}
                         state={fieldData?.[y]?.[x]?.state ?? CellState.Empty}
                         content={fieldData?.[y]?.[x]?.content ?? " "}
                     />
-                )).concat([<br />])
+                )).concat([<br key={y + "br"} />])
             )
         }
     </div>
diff --git a/src/components/Keyboard.jsx b/src/components/Keyboard.jsx
index 99a8d88..1dbaf75 100644
--- a/src/components/Keyboard.jsx
+++ b/src/components/Keyboard.jsx
@@ -9,13 +9,14 @@ export const Keyboard = ({used, onKey}) => {
         "ENTER", "Z", "X", "C", "V", "B", "N", "M", "BACK"
     ];
 
+    let newlineCounter = 0;
     return <div className="keyboard">
         {
             keys.map((key) => {
                 if (key) {
-                    return <Key onKey={onKey} state={used[key] ?? CellState.Unknown} content={key} />;
+                    return <Key key={key} onKey={onKey} state={used[key] ?? CellState.Unknown} content={key} />;
                 } else {
-                    return <br />
+                    return <br key={"br-" + newlineCounter++} />
                 }
             })
         }