lisft up state

src/App.js

@@ -1,17 +1,12 @@
 import './App.css';
 import { useState } from 'react';
 
-function Square() {
-  const [value, setValue] = useState(null);
-
-  function handleClick() {
-    setValue('X')
-  }
+function Square({value, onSquareClick}) {
 
   return ( 
     <button 
       className="square"
-      onClick={handleClick}
+      onClick={onSquareClick}
     >  
       {value}
     </button>
@@ -19,22 +14,31 @@ function Square() {
 }
 
 function App() {
+
+  const [squares, setSquares] = useState(Array(9).fill(null));
+  
+  function handleClick(i) {
+    const nextSquares = squares.slice();
+    nextSquares[i] = "X";
+    setSquares(nextSquares);
+  }
+
   return (
   <>
   <div className="board-row">
-    <Square />
-    <Square />
-    <Square />
+    <Square value={squares[0]} onSquareClick={() => handleClick(0)}/>
+    <Square value={squares[1]} onSquareClick={() => handleClick(1)}/>
+    <Square value={squares[2]} onSquareClick={() => handleClick(2)}/>
   </div>
   <div className="board-row">
-    <Square />
-    <Square />
-    <Square />
+    <Square value={squares[3]} onSquareClick={() => handleClick(3)}/>
+    <Square value={squares[4]} onSquareClick={() => handleClick(4)}/>
+    <Square value={squares[5]} onSquareClick={() => handleClick(5)}/>
   </div>
   <div className="board-row">
-    <Square />
-    <Square />
-    <Square />
+    <Square value={squares[6]} onSquareClick={() => handleClick(6)}/>
+    <Square value={squares[7]} onSquareClick={() => handleClick(7)}/>
+    <Square value={squares[8]} onSquareClick={() => handleClick(8)}/>
   </div>
   </>
   );