Skip to content
Permalink
Browse files

Use two loops to make the squares instead of hardcoding them

  • Loading branch information...
Sercan Leylek
Sercan Leylek committed Feb 23, 2019
1 parent 83dcaa9 commit 11b4360be4124a522929ece066b690270629d244
Showing with 19 additions and 15 deletions.
  1. +19 −15 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>
);
}

0 comments on commit 11b4360

Please sign in to comment.
You can’t perform that action at this time.