react render_error ai_generated true

Error: Objects are not valid as a React child

ID: react/objects-not-valid-as-child

Also available as: JSON · Markdown
90%Fix Rate
92%Confidence
50Evidence
2023-01-01First Seen

Version Compatibility

VersionStatusIntroducedDeprecatedNotes
18 active — — —

Root Cause

Trying to render a plain object in JSX. Common with Date objects, API responses.

generic

Workarounds

  1. 95% success Render specific properties of the object, not the object itself 
    <p>{user.name}</p> instead of <p>{user}</p>

    Sources: https://react.dev/learn/rendering-lists

  2. 90% success For arrays, use .map() to render each element 
    {items.map(item => <li key={item.id}>{item.name}</li>)}

    Sources: https://react.dev/learn/rendering-lists

Dead Ends

Common approaches that don't work:

  1. Use JSON.stringify() in JSX 65% fail

    Shows raw JSON to users, not a real UI

  2. Wrap object in String() 80% fail

    Shows [object Object]

Error Chain

Frequently confused with: