lift up state again

src/App.js

@@ -13,10 +13,7 @@ function Square({value, onSquareClick}) {
   );
 }
 
-function Board() {
+function Board({ xIsNext, squares, onPlay }) {
-  const [xIsNext, setXIsNext] = useState(true);
-  const [squares, setSquares] = useState(Array(9).fill(null));
-  
   function handleClick(i) {
     if (squares[i] || calculateWinner(squares)) {
       return;
@@ -27,8 +24,7 @@ function Board() {
     } else { 
       nextSquares[i] = "O";
     }
-    setSquares(nextSquares);
+    onPlay(nextSquares);
-    setXIsNext(!xIsNext);
   }
 
   const winner = calculateWinner(squares);
@@ -62,10 +58,19 @@ function Board() {
 }
 
 function App() {
+  const [xIsNext, setXIsNext] = useState(true);
+  const [history, setHistory] = useState([Array(9).fill(null)]);
+  const currentSquares = history[history.length - 1];
+
+  function handlePlay(nextSquares) {
+    setHistory([...history, nextSquares]);
+    setXIsNext(!xIsNext);
+  }
+
   return (
     <div className="game">
       <div className="game-board">
-        <Board />
+        <Board xIsNext={xIsNext} squares={currentSquares} onPlay={handlePlay} />
       </div>
       <div className="game-info">
         <ol>{/*TODO*/}</ol>