【React】Error: Objects are not valid as a React childの解決策

React初心者の私にとって意味不明だったエラーをやっと解決できた！嬉しい！
このエラーメッセージ “Error: Objects are not valid as a React child” は、Reactでコンポーネントがレンダリングされる際に、オブジェクトが直接子供として使用されているときに発生するらしい。難しくてよくわからないけど、Reactは通常、文字列や数値のようなプリミティブな型を子供として扱いますが、オブジェクトは直接は受け付けない。

簡単にまとめると、コンポーネントにpropsでオブジェクトを渡すと出てくるエラーらしい。

propsをいまいち理解できてなかったので、なかなか解決できなかった。

エラー原因の状態

直接オブジェクトを渡している場合

オブジェクトは渡せない…わけではないけど、このままではエラーになる。

// 例: エラーが発生する
const myObject = { key: 'value' }; // これがオブジェクト
return <MyComponent prop={myObject} />; // propsにオブジェクトを渡しているからエラーになる

オブジェクト内にコンポーネントが含まれている場合

オブジェクトの中にコンポーネントがあってもダメ

// 例: エラーが発生する
const myObject = { key: <SomeComponent /> }; // オブジェクトの中に、コンポーネントがある
return <MyComponent prop={myObject} />;

エラーの解決策

オブジェクトを文字列や数値に変換する

オブジェクトがシンプルな場合は、コンポーネントに渡す前に、それを文字列や数値などのプリミティブな型に変換する。

// 例: オブジェクトを文字列に変換する
const myObject = { key: 'value' };
return <MyComponent prop={JSON.stringify(myObject)} />; // ここで変換する

オブジェクト内のコンポーネントを正しくレンダリングする

オブジェクト内にコンポーネントがある場合、そのコンポーネントを正しくレンダリングする。

// 例: オブジェクト内のコンポーネントをレンダリングする
const myObject = { key: <SomeComponent /> };
return <MyComponent prop={myObject.key} />; // ここでkeyを指定すればできるらしい

エラーを解決できるようになるために勉強した方がよいこと

今後同じようなエラーを解決できるようになるために、できることはこの4つ。

1. Reactの基本：Reactの基本的なコンセプトやコンポーネントの作成方法、プロパティの受け渡しについて学びましょう。
2. JSXとデータ型：JSXでどのようにデータ型が扱われるかを理解し、どのようにして異なるデータ型を適切に扱うか学びましょう。
3. オブジェクトとJSON：オブジェクトの基本的な操作とJSON形式への変換について理解することで、Reactでのデータの扱いを改善できます。
4. Reactコンポーネントのライフサイクル：Reactコンポーネントがどのように動作し、レンダリングされる際に何が起こるかを理解すると、エラーを特定しやすくなります。

まとめ

ここで紹介していることが全てではなく、あくまで私が解決したパターンはこれでしたって感じです。

また地道にReactの勉強をしていこうと思います。
下記のReact公式サイトを読み漁ったらなんとか分かりました。

https://ja.react.dev/