From my back-end I receive data (or an object) that is on the form {val1: Array(100), val2: Array(100)}.

If I console.log that I get, well, an object in the console containing the above. However, if I try to save that into a useState with:

const [data, setData] = useState()

And try to show/output it in the return of my React component, such as:

return (
    <div>{data}</div>
)

I get the error:

Uncaught Error: Objects are not valid as a React child (found: object with keys {val1, val2}). If you meant to render a collection of children, use an array instead.

I was hoping I could just do something like: {data.val1} and then I got the data from that and so on. But now I might need to map over everything, or am I doing something wrong here ?

CodePudding user response：

You can't use the whole data object in your jsx and as you said you need to use the object keys to access a value like data.val1. If the data object is large you can use Object.keys(data) and map the keys on the object.