diff --git a/src/App.js b/src/App.js
index c6f16fc4..e3a6b55a 100644
--- a/src/App.js
+++ b/src/App.js
@@ -1,10 +1,10 @@
-import React, { useState } from 'react';
-import './App.css';
+import React, { useState } from "react";
+import "./App.css";
 
-import Board from './components/Board';
+import Board from "./components/Board";
 
-const PLAYER_1 = 'X';
-const PLAYER_2 = 'O';
+const PLAYER_1 = "X";
+const PLAYER_2 = "O";
 
 const generateSquares = () => {
   const squares = [];
@@ -16,46 +16,120 @@ const generateSquares = () => {
     for (let col = 0; col < 3; col += 1) {
       squares[row].push({
         id: currentId,
-        value: '',
+        value: "",
       });
       currentId += 1;
     }
   }
-
   return squares;
-}
+};
 
 const App = () => {
-
+  const [player, setPlayer] = useState("player_1");
   const [squares, setSquares] = useState(generateSquares());
+  const [winner, setWinner] = useState(null);
 
-  // Wave 2
-  // You will need to create a method to change the square 
-  //   When it is clicked on.
-  //   Then pass it into the squares as a callback
+  // wave 2
+  //  changes the square when it is clicked on.
+  //  Then pass it into the squares as a callback
+  const onClickCallback = (squareId) => {
+    console.log('clicked');
+    console.log (winner);
+    if (winner !== null) {
+      return;
+    }
+   console.log("no winner");
 
+    let gameValue = "";
+    if (player === "player_1") {
+      gameValue = PLAYER_1;
+    } else if (player === "player_2") {
+      gameValue = PLAYER_2;
+    }
 
-  const checkForWinner = () => {
-    // Complete in Wave 3
+    const newSquares = [];
+    squares.forEach((row) => {
+      const newRow = [];
+      row.forEach((square) => {
+        if (square.id === squareId) {
+          //updates the square
+          const newSquare = {
+            id: square.id,
+            value: gameValue,
+          };
+          newRow.push(newSquare);
+        } else {
+          newRow.push(square);
+        }
+      });
+      newSquares.push(newRow);
+    });
 
-  }
+    checkForWinner(newSquares);
+    setSquares(newSquares);
 
+    let nextPlayer = "";
+    if (player === "player_1") {
+      nextPlayer = "player_2";
+    } else if (player === "player_2") {
+      nextPlayer = "player_1";
+    }
+    setPlayer(nextPlayer);
+  };
+
+  // wave 3
+  const checkForWinner = (squares) => {
+    const winningRows = [
+      [squares[0][0], squares[0][1], squares[0][2]],
+      [squares[1][0], squares[1][1], squares[1][2]],
+      [squares[2][0], squares[2][1], squares[2][2]],
+      [squares[0][0], squares[1][0], squares[2][0]],
+      [squares[0][1], squares[1][1], squares[2][1]],
+      [squares[0][2], squares[1][2], squares[2][2]],
+      [squares[0][0], squares[1][1], squares[2][2]],
+      [squares[0][2], squares[1][1], squares[2][0]],
+    ];
+
+    for (let i = 0; i < winningRows.length; i++) {
+      const [a, b, c] = winningRows[i];
+      console.log(a.value);
+      if (a.value && a.value === b.value && a.value === c.value) {
+        //return a.value;
+        if (a.value === PLAYER_1)  {
+          setWinner("player_1");
+
+        } else if (a.value === PLAYER_2) {
+          setWinner("Player_2");
+        // if (a.value === "o") setWinner("Player_2");
+        }
+      }
+    } // otherwise
+    return null;
+  };
+
+  // wave 4
   const resetGame = () => {
-    // Complete in Wave 4
-  }
+    setPlayer("player_1");
+    setSquares(generateSquares());
+    setWinner(null);
+  };
 
   return (
     <div className="App">
       <header className="App-header">
         <h1>React Tic Tac Toe</h1>
-        <h2>The winner is ... -- Fill in for wave 3 </h2>
-        <button>Reset Game</button>
+        <h2>The winner is {winner} </h2>
+        <button onClick={resetGame}>Reset Game</button>
       </header>
       <main>
-        <Board squares={squares} />
+        <Board
+          squares={squares}
+          onClickCallback={onClickCallback}
+          player={player}
+        />
       </main>
     </div>
   );
-}
+};
 
 export default App;
diff --git a/src/components/Board.js b/src/components/Board.js
index 484198fe..6dd4745b 100644
--- a/src/components/Board.js
+++ b/src/components/Board.js
@@ -4,14 +4,28 @@ import Square from './Square';
 import PropTypes from 'prop-types';
 
 
-const generateSquareComponents = (squares, onClickCallback) => {
-  // Complete this for Wave 1
+const generateSquareComponents = (squares, onClickCallback, player) => {
 
+  const squareComponents = squares.map((row) => {
+    return row.map(({id, value}) => {
+  return (
+    <Square
+       id={id}
+       value={value}
+       onClickCallback={onClickCallback}
+       player={player}
+       key={id}
+    />
+    
+     );
+    });
+});
+return squareComponents;
 }
 
-const Board = ({ squares, onClickCallback }) => {
-  const squareList = generateSquareComponents(squares, onClickCallback);
-  console.log(squareList);
+const Board = ({ squares, onClickCallback, player }) => {
+  const squareList = generateSquareComponents(squares, onClickCallback, player);
+  
   return <div className="grid" >
     {squareList}
   </div>
@@ -22,11 +36,12 @@ Board.propTypes = {
     PropTypes.arrayOf(
       PropTypes.shape({
         id: PropTypes.number.isRequired,
-        value: PropTypes.string.isRequired
+        value: PropTypes.string.isRequired,   
       })
     )
   ),
   onClickCallback: PropTypes.func.isRequired,
+  player: PropTypes.string.isRequired
 };
 
 export default Board;
diff --git a/src/components/Square.js b/src/components/Square.js
index 71f46b8c..bf945414 100644
--- a/src/components/Square.js
+++ b/src/components/Square.js
@@ -7,9 +7,11 @@ const Square = (props) => {
   // For Wave 1 enable this 
   //  Component to alert a parent 
   //  component when it's clicked on.
+ 
 
   return <button
     className="square"
+    onClick={() => props.onClickCallback(props.id)}
   >
     {props.value}
   </button>