diff --git a/src/index.js b/src/index.js index ab6f1b4..2d4632f 100644 --- a/src/index.js +++ b/src/index.js @@ -3,7 +3,6 @@ import ReactDOM from 'react-dom'; import './index.css'; /*TODO - Rewrite Board to use two loops to make the squares instead of hardcoding them. Add a toggle button that lets you sort the moves in either ascending or descending order. When someone wins, highlight the three squares that caused the win. When no one wins, display a message about the result being a draw. @@ -17,35 +16,28 @@ function Square(props) { ); } -class Board extends React.Component { - renderSquare(i) { - return this.props.handleClick(i)} - />; - } - - render() { - return ( -
-
- {this.renderSquare(0)} - {this.renderSquare(1)} - {this.renderSquare(2)} -
-
- {this.renderSquare(3)} - {this.renderSquare(4)} - {this.renderSquare(5)} -
-
- {this.renderSquare(6)} - {this.renderSquare(7)} - {this.renderSquare(8)} -
-
+function Board(props) { + const rows = []; + for (let y = 0; y < 3; y++) { + const squares = []; + for (let x = 0; x < 3; x++) { + const index = y * 3 + x; + squares.push( + props.handleClick(index)} + /> + ); + } + rows.push( +
{squares}
); } + + return ( +
{rows}
+ ); } class Game extends React.Component { @@ -150,7 +142,7 @@ function calculateWinner(squares) { return null; } -function squareIndexToPosition(index){ +function squareIndexToPosition(index) { return [ index % 3, Math.floor(index / 3),