Error: Objects are not valid as a React child (found: object with keys {id, name, total}). If you meant to render a collection of children, use an array instead.

Next.js · updated 2026-11-04

Thrown by React while rendering when a value inside JSX (between tags, or as children) is an object instead of a string, number, element or array. The "found:" part lists the object's keys, which usually tells you exactly which value it was. In production builds it appears as Minified React error #31 with the same details in the URL.

Error: Objects are not valid as a React child (found: object with keys {id, name, total}). If you meant to render a collection of children, use an array instead.
    at throwOnInvalidObjectType (webpack-internal:///(app-pages-browser)/./node_modules/react-dom/cjs/react-dom-client.development.js:6340:11)
    at reconcileChildFibers (webpack-internal:///(app-pages-browser)/./node_modules/react-dom/cjs/react-dom-client.development.js:7071:13)

Quick fix

Use the keys in the message to find the value, then render a field of it ({order.name}), a formatted string ({date.toLocaleDateString()}), or map a list to elements ({items.map((i) => <li key={i.id}>{i.name}</li>)}). For a Promise in a Client Component, await the data in a Server Component and pass it down as props.

1. Read the keys after "found:" (or the args in the #31 URL) and search the component for the value that has them.
2. Render a property of the object, not the object itself.
3. Dates: format them (toLocaleDateString, toISOString) before rendering.
4. Lists: map the array to elements with a key.
5. found: [object Promise]: await the value in a Server Component (or with use()) instead of rendering the Promise.

// Before: {order} and {order.createdAt} are an object and a Date
// <p>{order} placed {order.createdAt}</p>

export function OrderLine({ order }: { order: { id: string; name: string; createdAt: Date; items: { id: string; name: string }[] } }) {
  return (
    <div>
      <p>{order.name} placed {order.createdAt.toLocaleDateString()}</p>
      <ul>
        {order.items.map((item) => (
          <li key={item.id}>{item.name}</li>
        ))}
      </ul>
    </div>
  );
}

Why it happens

Other fixes

• In production, Minified React error #31 links to react.dev/errors/31 with the found value in the URL; the keys there identify the value just like in development.
• TypeScript catches most of these if the props are typed as string or ReactNode instead of any.

Same error, other wording

• Error: Minified React error #31; visit https://react.dev/errors/31?args[]=object%20with%20keys%20%7Bid%2C%20name%7D for the full message
• Error: Objects are not valid as a React child (found: [object Date]).
• Error: Objects are not valid as a React child (found: [object Promise]).

Related errors

• Element type is invalid: expected a string (for built-in components) or a class/function...
• Hydration failed because the server rendered HTML didn't match the client. As a result...
• Only plain objects, and a few built-ins, can be passed to Client Components from Server...

More in React and Next.js rendering

• An error occurred in the Server Components render. The specific message is omitted in...Next.js
• Dynamic server usage: Route /x couldn't be rendered statically because it used `headers`.Next.js
• ReferenceError: window is not definedNext.js
• Error: Event handlers cannot be passed to Client Component props.Next.js
• Route "/orders/[id]" used `params.id`. `params` should be awaited before using its...Next.js
• Error: NEXT_REDIRECTNext.js
• Error: NextRouter was not mounted.Next.js
• Invalid src prop (https://cdn.example.com/p/42.jpg) on `next/image`, hostname...Next.js
• TypeError: Failed to parse URL from /api/ordersNext.js
• Too many re-renders. React limits the number of renders to prevent an infinite loop.Next.js
• useSearchParams() should be wrapped in a suspense boundary at page "/search".Next.js
• You're importing a module that depends on `useState` into a React Server Component...Next.js

References: React docs: error #31, React docs: rendering lists