added key to card loop

src/components/CardGroup.tsx

@@ -1,4 +1,5 @@
 import React from "react"
+import Card from "../types/Card"
 import CardGroup from "../types/CardGroup"
 import Side from "../types/Side"
 import CardComp from "./Card"
@@ -20,7 +21,7 @@ const CardGroupComp: React.FC<Props> = ({cardGroup,side,onChange,onRemove}) => {
 			/>
 			<div className="flex">
 				{cardGroup.cards.map((card,index) => 
-					<CardComp card={card} side={side}
+					<CardComp key={index} card={card} side={side}
 						onChange={(newCard)=>{
 							onChange?.(new CardGroup(
 								cardGroup.numInDeck,
@@ -33,6 +34,18 @@ const CardGroupComp: React.FC<Props> = ({cardGroup,side,onChange,onRemove}) => {
 						)}
 					/>
 				)}
+				<div
+					className="bg-blue-500 m-1 p-1 cursor-pointer"
+					onClick={()=>onChange?.(
+						new CardGroup(
+							cardGroup.numInDeck,
+							...cardGroup.cards,
+							new Card("New card",false,false)
+						)
+					)}
+				>
+					Add card
+				</div>
 			</div>
 		</div>
 	)

src/components/Deck.tsx

@@ -1,4 +1,6 @@
 import React from "react"
+import Card from "../types/Card"
+import CardGroup from "../types/CardGroup"
 import Deck from "../types/Deck"
 import Side from "../types/Side"
 import CardGroupComp from "./CardGroup"
@@ -37,6 +39,19 @@ const DeckComp: React.FC<Props> = ({deck,side,title,onChange}) => {
                         }}
                     />
                 )}
+                <div className="bg-red-500 m-1 p-1 cursor-pointer" 
+                    onClick={()=>onChange?.(
+                        new Deck(
+                            deck.numDefusers,
+                            ...deck.cardGroups,
+                            new CardGroup(1,new Card("New card",false,false))
+                        )
+                    )}
+                >
+                    <div>
+                        Add Group
+                    </div>
+                </div>
             </div>
         </div>
     )