Objects are not valid as a React child

여러 중첩된 컴포넌트들 간에 state를 넘겨보고 있었는데 에러가 났다.

ERROR
Objects are not valid as a React child (found: object with keys {id, title, content, price, img}). If you meant to render a collection of children, use an array instead.

부모가 object를 넘겨줬고, 이를 그대로 렌더링 하려고 해서 나는 에러라고 함.

뭔가 했는데 내가 이렇게해서 그런거였음!!!

return (
  <div className={"start box " + fade}>
    { [<div>{shoes}</div>, <div>내용2</div>, <div>내용3</div>][activeTab] }
  </div>
  )

shoes state로 가보면 이건 data에서 가져온 거였고

function App() {
  let [shoes, setShoes] = useState(data);

data.js에서 확인해 보니,

let data = [
  {
    id: 0,
    title: "White and Black",
    content: "Born in France",
    price: 120000,
    img: "https://codingapple1.github.io/shop/shoes1.jpg",
  },

  {
    id: 1,
    title: "Red Knit",
    content: "Born in Seoul",
    price: 110000,
    img: "https://codingapple1.github.io/shop/shoes2.jpg",
  },

  {
    id: 2,
    title: "Grey Yordan",
    content: "Born in the States",
    price: 130000,
    img: "https://codingapple1.github.io/shop/shoes3.jpg",
  },
  
];

이걸 shoes < 로만 출력하려고 했으니 당연히 안된다!
그 안에서 뭘 뽑아서 쓸건지 써줬어야 했다.

return (
  <div className={"start box " + fade}>
    { [<div>{shoes[0].title}</div>, <div>내용2</div>, <div>내용3</div>][activeTab] }
  </div>
  )

이렇게 써주니 정상출력됨.