// アロー関数をコンポーネントに渡す時は、呼び出し元で引数を受け取るか受け取らないかで書き方が変わるので注意

function Square(props) {
    return (
        <button
            // onClick={() => props.onClick()}
            onClick={props.onClick}
        >
            {props.value}
        </button>
);
}
class Board extends React.Component {
    renderSquare(i) {
        return (
            <Square
                value={this.props.squares[i]}
                // 呼び出し元で引数がない場合は「() => 」
                onClick={() => this.props.onClick(i)}
            />
        );
    }

    render() {
        <div>
            {this.renderSquare(0)}
        </div>
    }
}

class Game extends React.Component {
    render() {
        return (
            <Board
                // 呼び出し元で引数を受け取るときは「(i) => 」と書く
                onClick={(i) => this.handleClick(i)} />
        );

    }
}