Objects are not valid as a react child 해결법

문제 원인

 

자바스크립트 Object를 리액트 컴포넌트처럼 사용하려 했을 때 생기는 문제이다

 

function myComponent() {
  const jsObject = { abc: 1, edf : 2};
  
  return (
      <div> {jsObject} <div/> // jsObject는 리액트 컴포넌트가 아니므로 에러!
    );
}

반응형

해결방법

리액트 컴포넌트가 아닌 jsObject가 마치 리액트 컴포넌트처럼 사용된 부분이 있는지 확인한다