Objects are not valid as a React child, explained and fixed
React children must be renderable: strings, numbers, elements, or arrays of those. This error means an expression inside JSX evaluated to a plain object, and the message names its keys: found: object with keys {name, age}. Somewhere the code wrote {user} where it meant {user.name}, or fed a whole object into a spot expecting a string. The keys in the message identify exactly which object it was, which makes this one of the faster React errors to hunt down.
How to find it
- Read the keys in the message and search the codebase for an object of that shape. The offending JSX expression renders that object (or an array containing it) directly.
- Check the usual expressions: a mapped list rendering the item instead of a property, an error object from a failed request rendered as the message, a Date object (its keys message reads differently but the class appears in the text), or a promise left in state by an async function stored without awaiting.
The usual causes
- Rendering the container instead of a field:
{user}, {item} in a list, {error} where error.message was intended.
- API data rendered before its shape was known: a field expected to be a string is actually a nested object, common with localized strings returned as
{en: '…', fr: '…'} objects.
- An array of objects used as a key or a label: values passed into attributes or select options that string conversion turns into objects in JSX expressions.
- Async results stored unexamined: the resolved value of a fetch (an object) placed into state meant for a string or a list of strings.
The fixes
- Render the intended property:
{user.name}, {String(value)} for simple values, or format deliberately (date.toLocaleDateString() for a Date).
- Map arrays to elements or strings, never to the raw items, and give each element a stable
key while doing it.
- For debugging only,
{JSON.stringify(obj)} displays the object; it is a diagnostic, not a UI, remove it from anything user-facing.
- Normalize at the data boundary when an API mixes shapes: convert fields to the strings the UI expects where the response is processed, so components stop guessing.
Common questions
Why did it break when the API changed? A field that used to be a string came back as an object (a common localization or versioning change). The component renders the field directly, so the new shape throws. Normalizing the response where it arrives prevents the whole class.
Can I render an object with a custom component? Yes, passing the object as a prop is fine:
What does “found: [object Object]” in older messages mean? The same thing in older React wording: the child's string conversion produced [object Object] or the renderer rejected it. The keys-listing version in current React is more helpful; the cause is identical.
Related errors