Refactor Board

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 <Square
-            value={this.props.squares[i]}
-            onClick={() => this.props.handleClick(i)}
-        />;
-    }
-
-    render() {
-        return (
-            <div>
-                <div className="board-row">
-                    {this.renderSquare(0)}
-                    {this.renderSquare(1)}
-                    {this.renderSquare(2)}
-                </div>
-                <div className="board-row">
-                    {this.renderSquare(3)}
-                    {this.renderSquare(4)}
-                    {this.renderSquare(5)}
-                </div>
-                <div className="board-row">
-                    {this.renderSquare(6)}
-                    {this.renderSquare(7)}
-                    {this.renderSquare(8)}
-                </div>
-            </div>
+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(
+                <Square
+                    key={index}
+                    value={props.squares[index]}
+                    onClick={() => props.handleClick(index)}
+                />
             );
         }
+        rows.push(
+            <div key={y} className="board-row">{squares}</div>
+        );
+    }
+
+    return (
+        <div>{rows}</div>
+    );
 }
 
 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),