Objects Are Not Valid As React Child

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.