Objects are not valid as a React child (found: object with keys {id, city, doing, photo}). If you meant to render a collection of children, use an array instead. 오류 해결

 

 

✔️ 에러 코드

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

 

✔️ 에러가 나온 이유

map을 쓰지 않고 바로 <li>나 <div> 태그로 감싸서 리턴했더니 이런 오류가 나왔다. 😅

 

👇에러코드 👇

import { useState } from "react";
import styled from "styled-components";

const Section = styled.div`
  border: 1px solid black;
  margin: 5px;
  padding: 5px;
  display: flex;
  justify-content: space-between;
`;

const BucketListMain = () => {
  const [data, setData] = useState("");

  fetch("http://localhost:3001/data/")
    .then((response) => response.json())
    .then((data) => setData(data));
  return (
    <Section>
      {data}
      {/* <p>{data.id}</p>
      <p>{data.city}</p>
      <p>{data.doing}</p>
      <img>{data.photo}</img> */}
    </Section>
  );
};
export default BucketListMain;

---

👇에러  수정 코드 👇

return (
    <Section>
      {data.map((item) => {
            return (
              <Li key={item.id}>
                <City>{item.city}</City>
                <Doing>{item.doing}</Doing>
                <Photo className='photo' src={item.photo} alt='' />
                <button
                  onClick={() => {
                    updateHandler(item);
                    openToggleHandler();
                  }}
                >
                
                ...

 

 

참고

https://itprogramming119.tistory.com/entry/React-Objects-are-not-valid-as-a-React-child-%ED%95%B4%EA%B2%B0-%EB%B0%A9%EB%B2%95

Objects are not valid as a React child 해결 방법

 

 

 

 

😃 잘못된 개념 전달이 있다면 댓글 부탁드립니다. 저의 성장에 큰 도움이 됩니다🤓