src/components/Gameboard/Gameboard.tsx

@@ -12,6 +12,8 @@ export default function Gameboard({ state, setState }: StateProps) {
 
     // callback for lifting state
     const liftSelection = useCallback((value: keyof ResourceCost) => {
+        console.log(value)
+
         if (!state.actions.getChips.active) return;
 
         setState((prev: AppState) => {
@@ -55,7 +57,7 @@ export default function Gameboard({ state, setState }: StateProps) {
                     <CardRow tier={3} cards={state.gameboard.cardRows.tierThree} />
                     <CardRow tier={2} cards={state.gameboard.cardRows.tierTwo} />
                     <CardRow tier={1} cards={state.gameboard.cardRows.tierOne} />
-                    <AvailableChips state={state} setState={setState} />
+                    <AvailableChips state={state} setState={setState} liftSelection={liftSelection} />
                     <AllPlayers state={state} setState={setState} />
                 </div>
             )

src/components/Resources/AvailableChips.tsx

@@ -1,11 +1,13 @@
 import { ResourceCost, StateProps } from "../../util/types";
 import { v4 } from "uuid";
 import "./AvailableChips.css"
-import { useEffect, useState } from "react";
+import { useEffect } from "react";
 
-export default function AvailableChips({ state, setState }: StateProps) {
-    const [selection, setSelection] = useState([]);
+interface ResourceProps extends StateProps {
+    liftSelection: (value: keyof ResourceCost) => void
+}
 
+export default function AvailableChips({ state, setState, liftSelection }: ResourceProps) {
     useEffect(() => {
         return;
     }, [state])
@@ -13,11 +15,11 @@ export default function AvailableChips({ state, setState }: StateProps) {
     return (
         <div className="available-chips">
             {
-                Object.keys(state.gameboard.tradingResources).map((key: string) => {
+                Object.keys(state.gameboard.tradingResources).map((key: string | keyof ResourceCost) => {
                     return (
                         <div key={v4()} className={`chips-${key}`}>
-                            <button key={v4()} value={key} onClick={() => console.log(key)}>
-                                {key}: {state.gameboard.tradingResources[key as keyof ResourceCost]}
+                            <button key={v4()} value={key} onClick={() => liftSelection(key as keyof ResourceCost)}>
+                                {key}: {state.gameboard.tradingResources[key]}
                             </button>
                         </div>
                     )