Use two loops to make the squares instead of hardcoding them

tic-tac-toe/src/components/Board/Board.js

@@ -5,30 +5,34 @@ class Board extends React.Component {
 
     renderSquare(i) {
         return (<Square
+                        key={i}
                         value={this.props.squares[i]}
                         onClick={() => this.props.onClick(i)}
                 />
         );
     }
 
+    createTheBoard() {
+        let board = [];
+
+        let counter = 0;
+        for (let i = 0; i < 3; i++) {
+            let children = [];
+            for (let j = 0; j < 3; j++) {
+                children.push(this.renderSquare(counter));
+                counter++;
+            }
+            board.push(<div className="board-row" key={i}>{children}</div>);
+        }
+
+        return board;
+    }
+
     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>
+                {this.createTheBoard()}
             </div>
         );
     }