Need Help With React Development?

Work with our skilled React developers to accelerate your project and boost its performance.

Hire Reactjs Developers

Support On Demand!

Error is thrown when an Object is directly being passed to be rendered as a component child OR props.
React does not support objects being rendered directly.

Normally, to render objects we can access a value by accessing key of object
Example:-

let personObj = {name : “DummyName”}

Try accessing like this

{personObj.name}

Another option is to iterate over object, i.e.

{Object.keys(personObj).map((key) => (
  <div key={key}>
    {key}: {personObj[key]}
  </div>
))}

This will render the whole object with key-value pair.

Related Q&A