Reactで「Objects are not valid as a React child」エラーの原因と解決法

2025.08.19

React を利用していると、“Objects are not valid as a React child” というエラーに遭遇することがあります。これは初心者にとって非常に戸惑いやすいエラーで、特に オブジェクトを直接 JSX 内でレンダリングしようとした場合 に発生します。

本記事では、このエラーの原因と解決方法を整理し、同じ罠にハマらないための備忘録としてまとめます。

目次

1. エラーの概要

React のレンダリングでは、基本的に 文字列・数値・React 要素・配列（これらの組み合わせ） が子要素として許可されます。しかし、プレーンなオブジェクトをそのまま埋め込もうとするとエラーが発生 します。

function App() {
  const user = { name: "Taro", age: 25 };
  return <div>{user}</div>; // ❌ エラー: Objects are not valid as a React child
}

図解イメージ：

JSX内に埋め込める要素:
- 文字列
- 数値
- React要素
- 配列

JSX内に埋め込めない要素:
- オブジェクト (Plain Object)

このように、直接オブジェクトを描画しようとした時点でエラーが発生します。

2. よくある発生原因

初心者がよくハマるケースには次のようなものがあります。

  1. props にオブジェクトをそのまま渡して表示しようとする
  2. state にオブジェクトを保持し、そのまま JSX に展開する
  3. 配列の要素を map で描画する際に、各要素がオブジェクトのままになっている

例：

function UserList() {
  const users = [
    { name: "Taro" },
    { name: "Hanako" }
  ];
  return (
    <div>
      {users.map(u => <div>{u}</div>)} {/* ❌ エラー */}
    </div>
  );
}

図解イメージ：

ユーザー配列:
[{name: "Taro"}, {name: "Hanako"}]

mapでそのまま描画 → オブジェクトが子要素になりエラー

3. 解決方法

(1) JSON.stringify を利用する

オブジェクト全体を確認したいだけであれば、JSON.stringify() を使って文字列化すればエラーは回避できます。

<div>{JSON.stringify(user)}</div> // {"name":"Taro","age":25}

(2) 必要なプロパティを明示的に取り出す

表示したいのはオブジェクトそのものではなく、中身のプロパティであることが大半です。明示的にキーを指定して表示するのが正しい方法です。

<div>{user.name}</div> // "Taro"

(3) 配列描画時にプロパティを参照する

map で展開する場合も、オブジェクトをそのまま返すのではなくプロパティを取り出して表示します。

{users.map(u => <div key={u.name}>{u.name}</div>)}

図解イメージ：

オブジェクト配列:
[{name: "Taro"}, {name: "Hanako"}]

map処理:
→ {u.name} を描画 → 正常に表示

4. props 設計の見直し

このエラーは単に「表示方法の問題」である場合も多いですが、そもそも props の設計が不適切 である可能性もあります。子コンポーネントにオブジェクトをそのまま渡し、内部で表示しようとしてエラーになるケースが典型例です。

正しい設計では、必要な値だけを props として渡す のが望ましいです。

function User({ name }) {
  return <div>{name}</div>;
}

<User name={user.name} />

このように設計を見直すことで、エラーを根本的に防ぐことができます。

5. 初心者がハマるポイント

  • 「React はなんでも描画できる」と誤解しやすい
  • props/state にオブジェクトを持つのは問題ないが、JSX に直接描画するのは NG
  • map 展開の際に「要素をそのまま返す」ことでハマりやすい

図解イメージ：

正: <div>{user.name}</div>
誤: <div>{user}</div>

初心者が混乱するのは、配列は描画できるのにオブジェクトは描画できない という仕様差です。React の描画ルールを正しく理解しておくことが重要です。

6. まとめ

本記事では、React の代表的なエラーである “Objects are not valid as a React child” について解説しました。

  • JSX で直接オブジェクトを描画しようとすると発生
  • 解決方法は JSON.stringify() または プロパティを明示的に描画
  • props 設計を見直すことで根本的に防止可能

このエラーは React 初心者が最初に直面する典型的な壁です。原因を理解し、正しいデータの扱い方を学ぶことで、よりスムーズに開発を進めることができます。

参考

タイトルとURLをコピーしました