Objects are not valid as a React child found: object with keys

This is the error we got when we tried to render an object inside a component render method. We were including an object inside JSX code that we expected to be a string value.

let items = {}; // assigned empty object for demo
return (
<div>
   <ul>
      {items}
   </ul>
</div>
);

Reason of the issue

On the above JSX code, we were expecting the items to be a string but it was returning an empty object {}. We need to either reference a property of the object that is a string value or convert the object to a string. As soon as we made sure that the items are string, our issue was resolved.

Solution of the issue

let items = '<li>The string</li>'; // assigned a string for demo
return (
<div>
   <ul>
      {items}
   </ul>
</div>
);