ReactのTutorialをStatelessに書き換える練習でつまづいています。

Question

前提・実現したいこと

Javascript, React初心者です。
現在、ReactのTutorialをStateless functional componentsへ書き換える練習をしていますが、下記エラーが発生しています。

発生している問題・エラーメッセージ

src/index.js:88

  85 | const [squares, setSquares] = useState(Array(9).fill(null))
  86 | 
  87 | const handleClick = (i) => {
> 88 |     const squares = this.squares.slice()
     | ^  89 |     squares[i] = 'X'
  90 |     setSquares({squares:squares})
  91 | }

TypeError: Cannot read property 'squares' of undefined

該当のソースコード

１．Tutorialのコード（正常動作）

class Board extends React.Component {
    constructor(props) {
        super(props);
        this.state = {
        squares: Array(9).fill(null),
        };
    }

    handleClick(i) {
        const squares = this.state.squares.slice();
        squares[i] = 'X';
        this.setState({squares: squares});
    }
...

２．TutorialのコードをStateless functional componentsに変えた箇所（エラー発生）

const Board = () => {
    const [squares, setSquares] = useState(Array(9).fill(null))

    const handleClick = (i) => {
        const squares = this.squares.slice()
        squares[i] = 'X'
        setSquares({squares:squares})
    }
...

試したこと

• 当該の記載をTutorialのコードに置換して実行したところ、エラーなく想定通りの動作をすることを確認。
• thisのスコープや取り扱う変数が誤っているのかと試行錯誤。エラー発生行（88行目）を

　const squares = squares.slice()に変更したところ、同じ８８行目で下記エラーが発生

　Cannot access 'squares' before initialization

補足情報（FW/ツールのバージョンなど）

Tutorial通りに、create-react-appを用いて環境を作成。
yarn(v1.22.4)を使用し、yarn startにて実行しています。

Answer 1

this.squaresのthisが単に余計ではないかと思います。

Comments

[midi]

ご回答ありがとうございます！

コードを下記のように変更してみました。
```javascript
const Board = () => {
const [squares, setSquares] = useState(Array(9).fill(null))

const handleClick = (i) => {
const squares = squares.slice()　　←変更箇所
squares[i] = 'X'
setSquares({squares:squares})
}
```

やはり
Cannot access 'squares' before initialization
が出てしまいます。

const [squares, setSquares] = useState(Array(9).fill(null))
では、squaresのinitializationとは見做されないのでしょうか。。

[maisumakun]

いえ、コールバック内で同じsquaresという名前で変数を宣言したため、外側のsquaresが見えなくなっています。別の名前にしてください。

[midi]

ありがとうございます！

maisumakun様にご回答いただいた内容を修正し、正常動作を確認できました。
備忘のため、下記に修正後コードを残しておきます。

```javascript
const Board = () => {
const [squares, setSquares] = useState(Array(9).fill(null));

const handleClick = (i) => {
//Tempの変数名 _squareを定義
const _squares = squares.slice()
//const _squares = [...squares]でもOK

_squares[i] = 'X'
setSquares(_squares)
};
```