keep to conventions if it is onClick just call it onClick not callback

src/TicTacToe/Root.tsx

@@ -1,6 +1,6 @@
-import React from 'react';
+import React from "react";
-import { useState } from 'react';
+import { useState } from "react";
-import './style.css';
+import "./style.css";
 
 function TicTacToe() {
   const [gridState, setGridState] = useState(Array(9).fill(0));
@@ -8,19 +8,19 @@ function TicTacToe() {
   const [winState, setWinState] = useState(0);
   let localWinState = winState;
 
-	function updateGridState(index : number, state : number) {
+  function updateGridState(index: number, state: number) {
     gridState[index] = state;
     setGridState(gridState);
   }
 
-	function playTurn(index : number) {
+  function playTurn(index: number) {
     if (gridState[index]) return;
     if (winState) return;
 
     const newState = playerState ? 2 : 1;
     updateGridState(index, newState);
 
-		const winner = checkWinCondition()
+    const winner = checkWinCondition();
     if (winner) {
       localWinState = winner;
       setWinState(winner);
@@ -30,17 +30,12 @@ function TicTacToe() {
     setPlayerState(!playerState);
   }
 
-	function checkWinCondition() : number {
+  function checkWinCondition(): number {
-
+    function getWinningValue(a: number, b: number, c: number) {
-		function getWinningValue(
+      if (a === b && b === c && a === c) {
-				a : number, 
-				b : number, 
-				c : number 
-		) {
-			if ((a === b) && (b === c) && (a === c)) {
         return a;
       }
-			return 0
+      return 0;
     }
     /*
      * Diagonals
@@ -81,9 +76,9 @@ function TicTacToe() {
     const isDrawState = () => {
       for (let i in gridState) {
         if (!gridState[i]) return false;
-			};
-			return true;
       }
+      return true;
+    };
     if (isDrawState()) return 3;
 
     return 0;
@@ -91,50 +86,45 @@ function TicTacToe() {
 
   let stateString = "";
   if (localWinState === 3) {
-		stateString = `Game draw.`
+    stateString = `Game draw.`;
-	}
+  } else if (localWinState) {
-	else if (localWinState) {
     stateString = `Player ${getStateChar(localWinState)} wins.`;
-	}
+  } else {
-	else {
+    stateString = `Player ${getStateChar(playerState ? 2 : 1)} turn.`;
-		stateString = `Player ${getStateChar(playerState ? 2 : 1)} turn.`
   }
 
   return (
     <div className="TicTacToe">
       <h1>{stateString}</h1>
       <div className="TicTacToeGrid">
-				{
+        {gridState.map((item, index) => {
-					gridState.map((item, index) => {
+          const getState = () => {
-						const getState = () => { return gridState[index] };
+            return gridState[index];
-						const callback = () => { playTurn(index) };
+          };
-						return (<TicTacToeCell getState={getState} callback={callback}/>);
+          const callback = () => {
-					})
+            playTurn(index);
-				}
+          };
+          return <TicTacToeCell state={gridState[index]} onClick={callback} />;
+        })}
       </div>
     </div>
   );
 }
 
 interface CellProps {
-	getState: () => number;
+  state: number;
-	callback: () => void;
+  onClick: () => void;
 }
 
-function TicTacToeCell({ getState, callback }: CellProps) {
+function TicTacToeCell({ state, onClick }: CellProps) {
-
-	function handleClick() {
-		callback()
-	}
-
   return (
-			<div className={`TicTacToeCell ${getStateClass(getState())}`} onClick={handleClick}>
+    <div className={`TicTacToeCell ${getStateClass(state)}`} onClick={onClick}>
-				<p>{getStateChar(getState())}</p>
+      <p>{getStateChar(state)}</p>
     </div>
   );
 }
 
-function getStateChar(state : number) {
+function getStateChar(state: number) {
   switch (state) {
     case 1:
       return "O";
@@ -145,7 +135,7 @@ function getStateChar(state : number) {
   }
 }
 
-function getStateClass(state : number) {
+function getStateClass(state: number) {
   switch (state) {
     case 1:
       return "CellRed";