Passing a plain JavaScript object directly into JSX text position.
React JSX can directly render strings, numbers, arrays of React elements, `null`, or `undefined`. When you place a plain JS object inside JSX curly braces like `<div>{user}</div>`, React throws this error because it cannot automatically render arbitrary key-value pairs.
Commonly occurs when rendering an API response object directly instead of picking a specific string field (e.g., `{user}` instead of `{user.name}`), or when accidentally returning an object from a mapping callback.
1const user = { name: "Alex", age: 28 };2 3return (4 <div>5 {/* Error: user is an object, not a string/JSX element */}6 <span>User info: {user}</span>7 </div>8);1const user = { name: "Alex", age: 28 };2 3return (4 <div>5 {/* Option 1: Access specific property */}6 <span>User info: {user.name} ({user.age})</span>7 8 {/* Option 2: JSON stringify for debugging */}9 <pre>{JSON.stringify(user, null, 2)}</pre>10 </div>11);Simulate standard system builds to trigger compiler trace records and track memory crashes locally.
React attempts to serialize `user` into DOM text nodes, but standard JavaScript objects cannot be converted to DOM nodes without explicit stringification or property selection.