TIL 59 | [React] error - objects are not valid as a react child

에러 내용

요약하자면 JSX에서는 Objects를 React child로 사용할 수 없으니 배열 형태로 변환하여 사용하라는 것입니다.

원인

You can not use objects in JSX (What is JSX?). That’s it. If you are getting some data from server, check out if it is json encoded and you are receiving it in the form of JavaScript object. Although, objects can not be used but there are valid ways to use Arrays as a react child.

해결방법

So, instead of const jsobj = {"hello" : "world"};
if you convert it into array like const jsarr = ["hello", "world"]; then it will work without any issue.

We can also use an array of JSX as react child. In fact the map function returns the array only.

Object.values()
객체가 가지는 (열거 가능한) 속성의 값들로 이루어진 배열을 리턴
MDN 링크

출처 : React error – objects are not valid as a react child