マスを表すコンポーネントを作成 about bootcampreacttictactoe HOT 6 CLOSED

<td>要素を一つ持つコンポーネント
state 中にマルかバツのテキストを持つ

from bootcampreacttictactoe.

親のゲームボードからマスの state を参照できる形にしなくてはならない
解決策の候補

• useContext
• 子に親の state を更新するコールバック関数を props を通じて渡す

from bootcampreacttictactoe.

useContextを使えば、親コンポーネントの state と setState 関数を一度に子のコンポーネントに渡すことができる

from bootcampreacttictactoe.

GameBoard コンポーネントのfilledBy state を、Boxコンポーネントから設定
filledByはゲームのマス分の長さを持った String 型のリスト
Boxがリストのどのインデックスの値を変更するかは props から指定

from bootcampreacttictactoe.

onClickにsetState（を呼び出す）関数そのものではなく、その返り値を指定した場合、render内で state を更新することになり、無限ループしてしまう。

from bootcampreacttictactoe.

  //これだと、splice が破壊的なのでダメ
  // filledBy を直接編集していることになってしまう
  filledBy.splice(filledByIndex,1,currentPlayer)
  setFilledBy(filledBy)

from bootcampreacttictactoe.