← 一覧へ
コードの書き間違い出る場所:ブラウザの画面・開発者ツールたまに出る

オブジェクトをそのまま表示しようとした(React)

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

ひとことで言うと

「`{ id, name }` のようなデータのまとまりを、そのまま画面に表示しようとしました」という意味です。

よくある原因

  1. {user} のように、まとまりのまま書いた({user.name} が正しい)
  2. 日付(Date)をそのまま表示した
  3. async の関数を、そのままコンポーネントとして使った

自分で確かめること

たいていは、こうすると直ります

{user.name} のように中の項目を表示するか、JSON.stringify(user) で文字にします。

AIへの伝え方

下の文をコピーして、ChatGPT・Claude・Cursor などに貼り付けてください。トップで貼り付けたエラー文があれば、自動でそれに入れかわります。

次のエラーが出て困っています。プログラミング初心者にもわかるように、原因と直し方を教えてください。必要なら、直したコードも全部見せてください。

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

【やったこと】
(ここに、エラーが出る前にしたことを書く。例:npm run dev を実行した)

【参考】
このエラーは「オブジェクトをそのまま表示しようとした(React)」というもので、よくある原因は次のとおりです。
・`{user}` のように、まとまりのまま書いた(`{user.name}` が正しい)
・日付(Date)をそのまま表示した
・async の関数を、そのままコンポーネントとして使った

どれに当てはまるかを確かめる方法も教えてください。