From e8bf2a79473f563f2ed5a52b464be2c6498bec89 Mon Sep 17 00:00:00 2001
From: Djeeberjr <djeeberjr@gmail.com>
Date: Sun, 14 Nov 2021 17:40:54 +0100
Subject: [PATCH] "fixed" some keys in loops

---
 src/components/Card.tsx      | 4 +++-
 src/components/CardGroup.tsx | 5 ++++-
 src/components/Deck.tsx      | 5 ++++-
 3 files changed, 11 insertions(+), 3 deletions(-)

diff --git a/src/components/Card.tsx b/src/components/Card.tsx
index f31f220..256ee6c 100644
--- a/src/components/Card.tsx
+++ b/src/components/Card.tsx
@@ -27,7 +27,9 @@ const CardComp: React.FC<Props> = ({card,side,onChange,onRemove}) => {
             </div>
             <div className="border border-red-500">
                 {card.items.map((item,i)=>
-                    <div key={i}>
+                    <div 
+                        key={item + i} // FIXME: this is just a "temporary" solution. Implement propper key
+                    >
                         {ItemToDisplay(item,side)} <span onClick={()=>{
                             onChange?.(new Card(card.title,card.armor,card.helmet,...card.items.filter((_,fi)=>i!==fi)))
                         }} className="float-right cursor-pointer" >X</span>
diff --git a/src/components/CardGroup.tsx b/src/components/CardGroup.tsx
index 347de2c..5c52c0f 100644
--- a/src/components/CardGroup.tsx
+++ b/src/components/CardGroup.tsx
@@ -21,7 +21,10 @@ const CardGroupComp: React.FC<Props> = ({cardGroup,side,onChange,onRemove}) => {
 			/>
 			<div className="flex">
 				{cardGroup.cards.map((card,index) => 
-					<CardComp key={index} card={card} side={side}
+					<CardComp 
+						key={card.toString() + index} // FIXME: this is just a "temporary" solution. Implement propper key
+						card={card}
+						side={side}
 						onChange={(newCard)=>{
 							onChange?.(new CardGroup(
 								cardGroup.numInDeck,
diff --git a/src/components/Deck.tsx b/src/components/Deck.tsx
index ce4ba89..6a39fdc 100644
--- a/src/components/Deck.tsx
+++ b/src/components/Deck.tsx
@@ -24,7 +24,10 @@ const DeckComp: React.FC<Props> = ({deck,side,title,onChange}) => {
                 /> </span> }
             <div className="flex">
                 {deck.cardGroups.map((group,index) =>
-                    <CardGroupComp key={index} cardGroup={group} side={side} 
+                    <CardGroupComp 
+                        key={group.toString() + index} // FIXME: this is just a "temporary" solution. Implement propper key
+                        cardGroup={group}
+                        side={side} 
                         onChange={(newGroup)=>{
                             onChange?.(new Deck(
                                 deck.numDefusers,