Reactでfunction component化すると機能が使えなくなる

Reactのチュートリアルに沿ってローカルで三目並べを作成しています．
function componentの章までは問題無くできていたのですが，Squareクラスをfunction componentにするとタイルをクリックしてもXが書き込まれないようになってしまいます．function componentを使わずにクラスのままの場合は期待通りの挙動を示しております．

私の環境は以下の通りです．

OSX 10.14.3
node js 11.12.0
Vivaldi 2.3.1440.61 / Safari 12.0.3 / Google Chrome 73.0.3683.86

以下が編集中のindex.jsです．

js
1import React from 'react';
2import ReactDOM from 'react-dom';
3import './index.css';
4
5// class Square extends React.Component {
6//     render() {
7//         return (
8//             <button
9//                 className="square"
10//                 onClick = {() => this.props.onClick()}
11//             >
12//                 {this.props.value}
13//             </button>
14//         );
15//     }
16// }
17
18function Square(props){
19    return (
20        <button className="square" onClick={props.onClick}>
21            {props.Value}
22        </button>
23    );
24}
25
26class Board extends React.Component {
27    constructor(props){
28        super(props);
29        this.state = {
30            squares: Array(9).fill(null),
31        };
32    }
33
34    handleClick(i){
35        const squares = this.state.squares.slice();
36        squares[i] = 'X';
37        this.setState({squares: squares});
38    }
39
40    renderSquare(i) {
41        return (
42            <Square
43                value = {this.state.squares[i]}
44                onClick = {() => this.handleClick(i)}
45            />
46        );
47    }
48
49    render() {
50        const status = 'Next player: X';
51
52        return (
53            <div>
54            <div className="status">{status}</div>
55            <div className="board-row">
56                {this.renderSquare(0)}
57                {this.renderSquare(1)}
58                {this.renderSquare(2)}
59            </div>
60            <div className="board-row">
61                {this.renderSquare(3)}
62                {this.renderSquare(4)}
63                {this.renderSquare(5)}
64            </div>
65            <div className="board-row">
66                {this.renderSquare(6)}
67                {this.renderSquare(7)}
68                {this.renderSquare(8)}
69            </div>
70            </div>
71        );
72    }
73}
74
75class Game extends React.Component {
76    render() {
77        return (
78            <div className="game">
79            <div className="game-board">
80                <Board />
81            </div>
82            <div className="game-info">
83                <div>{/* status */}</div>
84                <ol>{/* TODO */}</ol>
85            </div>
86            </div>
87        );
88    }
89}
90
91// ========================================
92
93ReactDOM.render(
94    <Game />,
95    document.getElementById('root')
96);
97

どこかに間違いがありますでしょうか？もしくはバージョンアップによる仕様変更などがありましたでしょうか？

行動規範の内容に同意します

回答1件

ベストアンサー

jsx
1function Square(props){
2    return (
3        <button className="square" onClick={props.onClick}>
4            {props.value /* Value→value */}
5        </button>
6    );
7}