While rendering a list data, I got an error: ‘react-dom.development.js:55 Uncaught Invariant Violation: Objects are not valid as a React child(found: object with keys {id, typeId, reference, …..}). If you meant to render a collection of children, use an array instead.’

I used React Hooks to fetch data and ‘antd’ version 3.13 as my UI library, List and List.Item are supported by antd. I want to see the raw data so I just simply use a div tag to render the data, but I got an error from the code showing below

And, here is the error

Through the network request I found that this page is broken before it sends the request to fetch data, I was curious about that because this data works as expected in other pages. Also, I knew that useEffect() triggered when your component needs to do something after render. (Using the Effect Hook)

So, I knew that the error happened during render List, I modify the code as below which render the list with object’s property rather than the whole object, it worked.

Here is the outcome

Any feedback is welcome! :-)

blog comments powered by Disqus