React公式チュートリアルhandleClickの定義について

Question

renderSquare内で定めているhandleClick関数の定義についていくつか理解が追いついておりません

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

  renderSquare(i) {
    return (
      <Square
        value={this.state.squares[i]}
        onClick={() => this.handleClick(i)}
      />
    );
  }

ここでいう

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

の this.setState({squares: squares});は何を示していますか。
{squares: squares}の書き方も初めてみたので、調べたのですがよくわかりません。

お手数ですが、ご教示いただけますと幸いです。

よろしくお願いいたします。

Answer 1

squaresという名前のステートにconst squares = this.state.squares.slice();のsquaresを代入してます。

Comments

[gomasan]

ご回答ありがとうございます！！代入しているのですね、、理解しました。

Answer 2

{squares: squares}の書き方も初めてみたので、調べたのですがよくわかりません。

単なるオブジェクトリテラルです。

Comments

[gomasan]

ご回答ありがとうございます。オブジェクトリテラルを調べまして、すんなり理解できました。