Reactは、ユーザーインターフェース構築に強さを発揮するJavaScriptライブラリで、世界中の開発者に愛用されています。再利用可能なコンポーネントと状態管理の機能で、複雑なUIの構築を簡素化することができます。

Reactを使い始めたばかりでも、経験豊富な開発者であっても、時に「Objects are not valid as a React child」（オブジェクトはReactの子として無効です）というエラーメッセージを目にすることがあります。

この記事では、このエラーの原因と解決策をご紹介します。

「Objects are not valid as a React child」エラーの原因

「Objects are not valid as a React child」は、プログラミング中にReactでよく見られるエラーメッセージで、通常以下のように表示されます。

エラーメッセージ「Objects Are Not Valid as a React Child」
エラーメッセージ「Objects Are Not Valid as a React Child」

これは、コンポーネントが有効なReactの子要素（文字列、数値、React要素など、ただし配列やオブジェクトは不可）ではなく、オブジェクトを受け取ったことを意味します。主な原因としては、無効なデータ型とシリアライズできないデータを子として渡していることが考えられます。

1. 子としてオブジェクトを渡している

export default function App() {
  return (
    <div>
      {{ message: "Hello world!" }}
    </div>
  );
}

これは、Appコンポーネントが子要素としてオブジェクトをレンダリングしようとしている例です。Reactでは、オブジェクトは有効な子要素として認識されないため、このエラーメッセージが発生します。

2. 子としてシリアライズできないデータを渡している

export default function App() {
  const message = { text: "Hello world!" };
  return (
    <div>
      {message}
    </div>
  );
}

これは、Appコンポーネントが子要素としてシリアライズできないデータ型（オブジェクト）をレンダリングしようとしている例です。Reactでは、子要素がシリアライズ可能でなければならないため、このエラーメッセージが発生します。

3. 子として配列を渡している

export default function App() {
    const students = [
        { name: 'John Doe', age: 12 },
        { name: 'Jane Doe', age: 14 },
    ];
    const locale = {
        state: 'Florida',
        country: 'USA',
    };
    return (
        <>
            <span>{students}</span>
            <div>{locale}</div>
        </>
    );
}

上記コードには、子としてレンダリングしようとしている配列（students）とオブジェクト（locale）がありますが、Reactでは配列やオブジェクトを子要素として渡すことはできません。そのため、このエラーメッセージが発生します。

「Objects are not valid as a React child」エラーの解決方法

このエラーを解決するには、まずJavaScriptでは配列とオブジェクトが反復可能であることを覚えておくことが重要です。JavaScriptでは、配列は特別なオブジェクトとして扱われ、配列に問題がある場合もエラーメッセージ「Objects are not valid as a React child」が返されます。

配列やオブジェクト内のデータにアクセスするには、ループを使って配列を繰り返し処理したり、インデックス番号を使って特定の要素にアクセスしたり、オブジェクトのドット記法を使用したりします。

以下、一般的な解決策をそれぞれご紹介していきます。

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

まず1つ目の解決策は、子として渡す前にオブジェクトを文字列または数値に変換すること。例えば、以下のようになります。

export default function App() {
  const message = { text: "Hello world!" };
  return (
    <div>
      {JSON.stringify(message)}
    </div>
  );
}

上は子として渡す前に、JSON.stringify()メソッドでmessageオブジェクトを文字列に変換しています。これによって、エラーメッセージを回避することができます。

2. map()メソッドで配列を正しくレンダリングする

このエラーの別の原因として、Reactで誤って配列を使用していることも考えられます。配列を子としてレンダリングすると、このエラーが返されます。

この場合は、map()メソッドを使って配列の各項目を有効なReactの子要素に変換してください。

export default function App() {
    const students = [
        { name: 'John Doe', age: 12 },
        { name: 'Jane Doe', age: 14 },
    ];
    const locale = {
        state: 'Florida',
        country: 'USA',
    };
    return (
        <>
            {students.map((student, index) => (
                <div key={index}>
                    <span>{student.name}</span>
                    <span>{student.age}</span>
                </div>
            ))}
            <div>
                {locale.state}, {locale.country}
            </div>
        </>
    );
}

上の例は、map()メソッドでstudents配列を繰り返し、各要素を生徒の名前と年齢を含むdivに変換しています。また、レンダリングのパフォーマンスを最適化するため、各子要素にはkeyを追加しています。

3. 条件付きレンダリングで無効なデータ型のレンダリングを回避する

Reactの子要素として有効でない可能性のあるデータを渡す際には、条件付きレンダリングを使って、エラーを防ぐことができます。

function App() {
  const message = { text: "Hello world!" };
  return (
    <div>
      {typeof message === 'string' ? message : null}
    </div>
  );
}

上は、メッセージが文字列である場合にのみ、レンダリングを行うコード例です。これで、「Objects are not valid as a React child」エラーの発生を避けることができます。

「Objects are not valid as a React child」エラーを回避するためのベストプラクティス

このエラーを未然に防ぐため、Reactコンポーネントを構築する際にはベストプラクティスに従いましょう。特に重要なベストプラクティスには、以下のようなものがあります。

  • 常に有効なReactの子要素を子として渡す
  • シリアライズできないデータを子として渡さない
  • エッジケースや無効なデータ型を処理するには、条件付きレンダリングを使用する

まとめ

今回は「Objects are not valid as a React child」エラーの原因、解決方法、そしてベストプラクティスをご紹介しました。

Reactアプリケーションでレンダリングする前に、配列のループ処理に失敗するとこのエラーが発生することを覚えておいてください。

Reactアプリケーションを世界に配信するなら、Kinstaのアプリケーションホスティングがおすすめです。まずは無料利用枠を使って、リスクなしでお試しください。

「Objects are not valid as a React child」エラーに遭遇した経験はありますか？その際、どのように解決しましたか？以下のコメント欄でぜひお聞かせください。