});
function Square(props) {
+ let className = "square";
+
+ if (props.value) {
+ className += " occupied";
+ } else if (props.active) {
+ className += " open";
+ }
+
+ const onClick = props.active ? props.onClick : null;
+
return (
- <button className="square" onClick={props.onClick}>
+ <div className={className}
+ onClick={onClick}>
{props.value}
- </button>
+ </div>
);
}
class Board extends React.Component {
renderSquare(i) {
+ const value = this.props.squares[i];
return (
<Square
- value={this.props.squares[i]}
+ value={value}
+ active={! this.props.gameOver && ! value}
onClick={() => this.props.onClick(i)}
/>
);
</div>
<div className="game-board">
<Board
+ gameOver={winner}
squares={current.squares}
onClick={i => this.handleClick(i)}
/>