react runtime_error ai_generated true

Error: Element type is invalid: expected a string (for built-in components) or a class/function (for composite components) but got: object. Check the render method of `App`.

ID: react/invalid-array-child

Also available as: JSON · Markdown · 中文
85%Fix Rate
82%Confidence
1Evidence
2023-06-10First Seen

Version Compatibility

VersionStatusIntroducedDeprecatedNotes
React 16.8+ active — — —
React 17.0.2 active — — —
React 18.2.0 active — — —

Root Cause

A component's render method returned an array containing non-React-element objects, such as plain JavaScript objects or unrendered component classes, instead of valid React elements.

generic

中文

组件的 render 方法返回了一个包含非 React 元素对象的数组，例如纯 JavaScript 对象或未渲染的组件类，而不是有效的 React 元素。

Official Documentation

https://reactjs.org/docs/error-decoder.html/?invariant=31

Workarounds

  1. 90% success If you meant to render a list of components, ensure each item is a React element: data.map(item => <Component key={item.id} />). If you meant to display an object, use JSON.stringify(object) or access specific properties. 
    If you meant to render a list of components, ensure each item is a React element: data.map(item => <Component key={item.id} />). If you meant to display an object, use JSON.stringify(object) or access specific properties.
  2. 85% success Check that you are not accidentally passing a component class instead of an instance: <Component /> not Component alone. 
    Check that you are not accidentally passing a component class instead of an instance: <Component /> not Component alone.

中文步骤

  1. If you meant to render a list of components, ensure each item is a React element: data.map(item => <Component key={item.id} />). If you meant to display an object, use JSON.stringify(object) or access specific properties.
  2. Check that you are not accidentally passing a component class instead of an instance: <Component /> not Component alone.

Dead Ends

Common approaches that don't work:

  1. Wrapping the object in a <div> or fragment 40% fail

    If the object is not a valid React element, wrapping it won't fix the underlying issue—it will just produce a different error or render nothing.

  2. Using JSON.stringify on the object 60% fail

    This converts the object to a string, which may be displayed but is not a valid React child and can cause hydration mismatches.

  3. Importing the component as default instead of named 50% fail

    If the object is a plain JS object (e.g., from an API), no import style will make it a valid component.