From 0c8704cf80c60a52cdf62b70c183ccc53d159589 Mon Sep 17 00:00:00 2001
From: Halit Aksoy <jhalitaksoy@gmail.com>
Date: Wed, 13 Jul 2022 22:39:24 +0300
Subject: [PATCH] add key for board list items

---
 src/components/BoardView.tsx | 21 ++++++++++-----------
 1 file changed, 10 insertions(+), 11 deletions(-)

diff --git a/src/components/BoardView.tsx b/src/components/BoardView.tsx
index 024a7ac..aa94233 100644
--- a/src/components/BoardView.tsx
+++ b/src/components/BoardView.tsx
@@ -33,8 +33,8 @@ const HoleView: FunctionComponent<{
   pitViewModel: PitViewModel;
   onClick: () => void;
 }> = ({ pitViewModel, onClick }) => {
-  const balls = [...range(pitViewModel.stoneCount)].map((i) => (
-    <BallView color={pitViewModel.stoneColor} />
+  const balls = [...range(pitViewModel.stoneCount)].map((i, index) => (
+    <BallView key={index} color={pitViewModel.stoneColor} />
   ));
 
   return (
@@ -65,8 +65,8 @@ const StoreView: FunctionComponent<{
   gridColumn: string;
   gridRow: string;
 }> = ({ context, pitViewModel, gridColumn, gridRow }) => {
-  const balls = [...range(pitViewModel.stoneCount)].map((i) => (
-    <BallView color={pitViewModel.stoneColor} />
+  const balls = [...range(pitViewModel.stoneCount)].map((i, index) => (
+    <BallView key={index} color={pitViewModel.stoneColor} />
   ));
   const textColor = getColorByBrightness(
     pitViewModel.pitColor,
@@ -114,24 +114,23 @@ const BoardView: FunctionComponent<{
   userKey: string;
   onHoleSelect: (index: number, hole: Pit) => void;
 }> = ({ game, context, boardId, boardViewModel, userKey, onHoleSelect }) => {
-  const createPitView = (pitViewModel: PitViewModel, onClick: () => void) => {
-    return <HoleView pitViewModel={pitViewModel} onClick={onClick} />;
+  const createPitView = (key: any, pitViewModel: PitViewModel, onClick: () => void) => {
+    return <HoleView key={key} pitViewModel={pitViewModel} onClick={onClick} />;
   };
-  const player1Pits = game?.board.player1Pits.map((pit) => {
+  const player1Pits = game?.board.player1Pits.map((pit, index) => {
     const pitViewModel = boardViewModel.pits[pit.index];
-    return createPitView(pitViewModel, () => {
+    return createPitView(index, pitViewModel, () => {
       if (game.turnPlayerId === game.player1Id)
         onHoleSelect(game.board.player1Pits.indexOf(pit), pit);
     });
   });
-  const player2Pits = game!!.board.player2Pits.map((pit) => {
+  const player2Pits = game!!.board.player2Pits.map((pit, index) => {
     const pitViewModel = boardViewModel.pits[pit.index];
-    return createPitView(pitViewModel, () => {
+    return createPitView(index, pitViewModel, () => {
       if (game.turnPlayerId === game.player2Id)
         onHoleSelect(game.board.player2Pits.indexOf(pit), pit);
     });
   });
-  const isUserTurn = game.checkIsPlayerTurn(userKey);
   const theme = context.themeManager.theme;
   const player1BankViewModel =
     boardViewModel.pits[game.board.player1BankIndex()];