Reactで「Objects are not valid as a React child」エラーが発生する原因と解決方法

2024-04-02

Reactで「Objects are not valid as a React child」エラーが発生する原因と解決方法

Reactでコンポーネントをレンダリングしようとしたときに、以下のエラーが発生する場合があります。

Objects are not valid as a React child. If you meant to render a collection of children, use an array instead.

このエラーは、オブジェクトを直接子要素としてレンダリングしようとしたときに発生します。Reactでは、子要素は配列でなければなりません。

原因

Reactは、仮想DOMを使用して実際のDOMを操作します。仮想DOMは、実際のDOMを軽量に表現したもので、パフォーマンスの向上に役立ちます。

オブジェクトは、仮想DOMでは表現できないため、直接子要素としてレンダリングすることはできません。

解決方法

このエラーを解決するには、オブジェクトを配列に変換してからレンダリングする必要があります。

解決方法1：オブジェクトを配列に変換する

オブジェクトを配列に変換するには、以下の方法があります。

Object.values() メソッドを使用する
スプレッド構文を使用する

const object = {
  name: 'John Doe',
  age: 30,
};

// Object.values() メソッドを使用する
const children = Object.values(object);

// スプレッド構文を使用する
const children = [...object];

// 子要素としてレンダリングする
<div>
  {children}
</div>

解決方法2：React.Fragment を使用する

React.Fragment は、複数の要素をグループ化するコンポーネントです。

React.Fragment を使用すると、オブジェクトを直接子要素としてレンダリングすることができます。

const object = {
  name: 'John Doe',
  age: 30,
};

// React.Fragment を使用する
<div>
  <React.Fragment>
    {object.name}
    {object.age}
  </React.Fragment>
</div>

補足

オブジェクトを子要素としてレンダリングする必要がある場合は、上記の解決方法のいずれかを使用する必要があります。
オブジェクトを配列に変換する方が、パフォーマンスが向上する場合があります。
React.Fragment は、パフォーマンスの低下を招く可能性があるため、必要最低限の使用に留めることが推奨されます。

上記以外にも、エラーが発生する原因は考えられます。
エラーメッセージをよく読んで、原因を特定することが重要です。

const object = {
  name: 'John Doe',
  age: 30,
};

// Object.values() メソッドを使用する
const children1 = Object.values(object);

// スプレッド構文を使用する
const children2 = [...object];

// React.Fragment を使用する
const children3 = (
  <React.Fragment>
    {object.name}
    {object.age}
  </React.Fragment>
);

// 子要素としてレンダリングする
<div>
  <h1>オブジェクトを子要素としてレンダリングする</h1>
  <p>Object.values() メソッドを使用する</p>
  <ul>
    {children1.map((child) => (
      <li key={child}>{child}</li>
    ))}
  </ul>
  <p>スプレッド構文を使用する</p>
  <ul>
    {children2.map((child) => (
      <li key={child}>{child}</li>
    ))}
  </ul>
  <p>React.Fragment を使用する</p>
  <ul>
    {children3}
  </ul>
</div>

このコードを実行すると、以下の出力が得られます。

オブジェクトを子要素としてレンダリングする

Object.values() メソッドを使用する

* John Doe
* 30

スプレッド構文を使用する

* John Doe
* 30

React.Fragment を使用する

* John Doe
* 30

上記のコードは、React v17.0.2 で動作確認しています。
コードの詳細は、以下の URL を参照してください。

オブジェクトをReactで子要素としてレンダリングするその他の方法

map 関数を使用して、オブジェクトの各プロパティを子要素としてレンダリングすることができます。

const object = {
  name: 'John Doe',
  age: 30,
};

const children = Object.keys(object).map((key) => (
  <li key={key}>{object[key]}</li>
));

// 子要素としてレンダリングする
<div>
  <ul>
    {children}
  </ul>
</div>

* John Doe
* 30

const object = {
  name: 'John Doe',
  age: 30,
};

const children = (
  <>
    <li>{object.name}</li>
    <li>{object.age}</li>
  </>
);

// 子要素としてレンダリングする
<div>
  <ul>
    {children}
  </ul>
</div>

* John Doe
* 30

カスタムコンポーネントを使用する

カスタムコンポーネントは、オブジェクトをどのようにレンダリングするかを定義することができます。

const MyComponent = ({ object }) => {
  return (
    <ul>
      <li>{object.name}</li>
      <li>{object.age}</li>
    </ul>
  );
};

const object = {
  name: 'John Doe',
  age: 30,
};

// 子要素としてレンダリングする
<div>
  <MyComponent object={object} />
</div>