環境
- 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日目なので、エラー文はかなり推測して解釈しています。
誤りがあればぜひ教えていただきたいです！よろしくお願いいたします。