【解決】Objects are not valid as a React child エラーの修正方法

Error: Objects are not valid as a React child (found: object with keys {id, name}).

「オブジェクトを{}に入れて表示しようとしたら怒られた」というパターンだ。JSXの{}は「JavaScriptの式をここに埋め込む」という意味で、どんな値でも表示できるわけではない。

JSXが表示できる値・できない値

Reactがレンダリングできる値は決まっている。

値	扱い
string・number・bigint	テキストとして表示できる
boolean・null・undefined	何も表示しない
React要素	UIとして表示できる
配列・Setなどの反復可能な値	各要素が描画可能なら扱える。リストのkeyにも注意
プレーンオブジェクト・Date・Error	表示したいプロパティや文字列へ変換する
Promise	React 19のSuspense/useなど対応する設計と組み合わせる。レンダー中にfetchを毎回作る修正はしない

Mapをそのまま子へ渡すとキーと値の組が反復され、意図しない表示や警告になるため、Array.fromやmapで明示的にJSXへ変換します。単に「オブジェクトは全部だめ」と覚えず、表示したい値を取り出します。

パターン1：オブジェクトのプロパティを参照し忘れた

const user = { id: 1, name: '山田太郎' }

// ❌ エラー：オブジェクトそのものを表示しようとしている
return <div>{user}</div>

// ✅ 表示したいプロパティを指定する
return <div>{user.name}</div>

APIのレスポンスをstateに入れて、そのまま描画しようとするケースが特に多い。

const [profile, setProfile] = useState<{ name: string } | null>(null)
// ...

// ❌ profileオブジェクトをそのまま描画
return <div>{profile}</div>

// ✅ 必要なフィールドだけ取り出す
return <div>{profile?.name}</div>

エラーメッセージの found: object with keys {id, name} を読むと、どのオブジェクトが問題かわかる。

パターン2：Dateオブジェクトをそのまま描画した

new Date() はオブジェクトなので、文字列に変換してから使う。

const today = new Date()

// ❌ エラー：DateはオブジェクトなのでNG
return <p>{today}</p>

// ✅ 文字列に変換する
return <p>{today.toLocaleDateString('ja-JP')}</p>       // "2024/1/15"
return <p>{today.toISOString().split('T')[0]}</p>       // "2024-01-15"
return <p>{today.toLocaleString('ja-JP', { year: 'numeric', month: 'long', day: 'numeric' })}</p>  // "2024年1月15日"

どのフォーマットで表示したいかによって変換方法を選ぶ。MarkdownのfrontmatterからDateが渡ってくる場合も同様だ。

パターン3：取得処理と表示を混ぜた

fetch() や非同期関数の戻り値は Promise というオブジェクトだ。await なしで使うとそのままオブジェクトになる。

// ❌ レンダーのたびに新しい通信とPromiseを作ってしまう
return <div>{fetch('/api/user')}</div>

Effectとstateで取得する方法はありますが、エラー・HTTPステータス・cleanupを含めて実装します。下は表示するプロパティに焦点を当てた抜粋で、APIとUser型が必要です。完全な取得処理は カスタムHookの回を参照してください。

// ✅ useEffectでデータを取得してstateに保存する
const [user, setUser] = useState<User | null>(null)

useEffect(() => {
  fetch('/api/user')
    .then(res => res.json())
    .then(data => setUser(data))
}, [])

return <div>{user?.name ?? 'ロード中...'}</div>

パターン4：条件分岐でオブジェクトを返している

&& 演算子の右側がオブジェクトになっているケース。

const config = { theme: 'dark', lang: 'ja' }

// ❌ 条件がtrueのときオブジェクトを返している
return <div>{isAdmin && config}</div>

// ✅ 表示したい値に変換してから返す
return <div>{isAdmin && config.theme}</div>

// ✅ デバッグ用途ならJSON.stringifyで確認できる
return <div>{isAdmin && JSON.stringify(config)}</div>

パターン5：Errorオブジェクトをそのまま表示した

catch で受け取った Error もオブジェクトなので、そのままでは表示できない。

const [error, setError] = useState<Error | null>(null)

// ❌ Errorオブジェクトはオブジェクト
return <div>{error}</div>

// ✅ .message プロパティを使う
return <div>{error?.message}</div>

stateの型を string で持つほうがシンプルなこともある。

const [errorMessage, setErrorMessage] = useState<string | null>(null)

try {
  // ...
} catch (e) {
  setErrorMessage(e instanceof Error ? e.message : '不明なエラー')
}

return <div>{errorMessage}</div>

パターン6：map()の中でオブジェクトを返している

配列を .map() しているコードは正しくても、返している値がオブジェクトのままだとエラーになる。

const items = [{ id: 1, label: 'リンゴ' }, { id: 2, label: 'バナナ' }]

// ❌ オブジェクトをそのまま返している
{items.map(item => <li key={item.id}>{item}</li>)}

// ✅ 表示したいプロパティを指定する
{items.map(item => <li key={item.id}>{item.label}</li>)}

オブジェクトのキーと値の一覧を表示したい場合は Object.entries() を使う。

const settings = { theme: 'dark', lang: 'ja', fontSize: 14 }

{Object.entries(settings).map(([key, value]) => (
  <li key={key}>{key}: {String(value)}</li>
))}

TypeScriptがあれば書いた時点でわかる

TypeScriptを使うと、オブジェクトをJSXに渡した時点でエラーになる。実行してから気づくより早い。

const user = { id: 1, name: '山田太郎' }

// 型チェックでReactNodeに代入できない旨が報告される（文言は版による）
return <div>{user}</div>

描画する値の型を string | number に限定しておくと、オブジェクトを誤って渡す心配がなくなる。

このエラーと向き合うための1つの考え方

表示したい項目を選び、Reactが描画できる値にする。

オブジェクトはどう表示すべきかわからないから怒られる。プロパティを取り出す・文字列に変換する・別の方法で取得する——どれかで「表示できる形」にしてから渡す。

確認してみる

オブジェクト全体、nameだけ、JSON.stringifyの3つを比較する。デバッグ用JSONをそのまま利用者向け表示にしない。

仕様・手順の参照先