React errorReact: “Objects are not valid as a React child”

Why React can’t render it, and the fix

1. 01

   Rendering a whole object instead of a field

   “Objects are not valid as a React child (found: %s). If you meant to render a collection of children, use an array instead.” React, Minified React error #31

   React can render strings, numbers, elements and arrays of those. A plain object is none of these. Pick the field you want to show. Double braces are a common version: <p>{{ name }}</p> (a habit from other template languages) passes an object literal, so use <p>{name}</p>.

   // 🔴 user is { id, name, email }
   <p>{user}</p>
   
   // ✅
   <p>{user.name}</p>

2. 02

   A list of objects that was not mapped

   An API that returns an array of objects, or an object keyed by id, has to be turned into elements first. Map it, with a stable key for each item.

   <ul>
     {orders.map((o) => (
       <li key={o.id}>{o.number}: {o.total}</li>
     ))}
   </ul>
   
   // object keyed by id
   {Object.values(ordersById).map((o) => <Order key={o.id} order={o} />)}

3. 03

   A Date or an error object

   A Date is an object, so {createdAt} fails once the string from the API is turned into a Date. Format it. The same goes for an error object stored in state: render error.message, not error.

   <time>{createdAt.toLocaleDateString()}</time>
   {error && <p role="alert">{error.message}</p>}

4. 04

   A Promise or async component in client code

   Calling an async function in JSX, or writing async function MyComponent() in a client component, gives React a Promise. Async components only work as React Server Components (for example in the Next.js App Router). In client code, load the data in an effect or a data library and render the result once it arrives.

Checked against the vendor’s docs on November 7, 2026: React: Minified React error #31 (full message).

Rather hand it over?

Fixed scope, fixed price, paid upfront. The work happens in writing; no call needed.

• from $450App Fix TicketOne reproducible bug in an existing mobile or web app, diagnosed and fixed.See scope and start
• from $450AI-Built App RescueA Lovable, Bolt or Cursor app checked end to end in 3 days, then its worst problems fixed at a fixed price.No issues worth fixing, no charge. If the Launch Check finds nothing rated medium or higher, Simon refunds the full $450. You keep the report either way. This applies to the first 10 Launch Checks bought after October 30, 2026.See scope and start

Related: React “unique key prop” warning · React “Maximum update depth exceeded” · “Cannot read properties of undefined”