環境

React version18
CodeSandBbox

エラーの内容

Reactの公式チュートリアルを試していたところ、以下のエラーが出た。

Error
Objects are not valid as a React child (found: object with keys {value, onSquareClick}). If you meant to render a collection of children, use an array instead.

機械翻訳は以下の通り。

オブジェクトは React の子として有効ではありません (見つかった: キー {value, onSquareClick} を持つオブジェクト)。子のコレクションをレンダリングする場合は、代わりに配列を使用してください。

仮説

まず、エラーで指摘されている{value, onSquareClick}が書かれている箇所を探した。
すると、{}がないものの、子コンポーネントへのpropsとしてvalue, onSquareClickを渡していた。

App.js

<Square value={squares[0]} onSquareClick={handleClick} />

Square.js

export default function Square(value, onSquareClick) {
  return (
    <button className="square" onClick={onSquareClick}>
      {value}
    </button>
  );
}

エラーのReactの子として有効ではないという文言から、子へのpropsの渡し方が誤っていると推測。

解決

試しに{}をつけて{value, onSquareClick}としてみたところ、エラーは解消された。

Square.js

export default function Square({value, onSquareClick}) {
  return (
    <button className="square" onClick={onSquareClick}>
      {value}
    </button>
  );
}

そこで思い出したが、propsを複数渡すときはオブジェクトのまま渡すか、必ず{}で囲んで分割代入しなければならなかった。

{}で囲まずにvalue, onSquareClickとしていたせいで、エラーで(複数の引数を渡したいなら)配列を使って1つにまとめたら？と指摘されていたのかもしれない。

おわりに

Reactを始めてまだ3日目なので、エラー文はかなり推測して解釈しています。
誤りがあればぜひ教えていただきたいです！よろしくお願いいたします。

参考資料