[React] [리액트 에러 해결] Uncaught Error: Objects are not valid as a React child (found: [object Date]). If you meant to render a collection of children, use an array instead.

[리액트 에러 해결] 
Uncaught Error: Objects are not valid as a React child (found: [object Date]). 
If you meant to render a collection of children, use an array instead. 

 

react-datepicker를 사용해서 날짜를 받아오는 중에 마주한 에러..

진짜 얘때문에 얼마나 골머리를 썻는지 ㅋㅋㅋ 

 

 

* 에러 발생 상황:

react-datepicker를 사용해서 날짜를 받아 state 저장 후 다른 컴포넌트로 보내려고 함

분명 state까지 잘 저장이 되었는데, 다른 컴포넌트에서 출력하려니깐 에러가 남

 

* 에러 내용 :

Uncaught Error: Objects are not valid as a React child (found: [object Date]). If you meant to render a collection of children, use an array instead. 

 

 

*에러 원인 : 

하.. 에러 메시지에 모든 답이 있다..  삽질하지말고 에러 메시지 좀 잘 읽자 ..ㅠㅠ

react-datepicker의 날짜는 object 타입

난 react-datepicker로 받아온 날짜가 당연히 날짜니깐 당연 Date 타입일 줄 알았는데,

type of로 데이터형을 확인해 보니깐  object 타입이었다..

리액트에서는 오브젝트 타입을 그대로 랜더링 할 수 없다..

 

 

 

*에러 해결 : 

출력하는 부분에서 Date Object를  JSON.stringify() 로 감싸서 문자열로 만든다.

const ObjectiveList = ({ objectives }) => {
    return (
        <div>
            <h1>목표 리스트</h1>
            <ul>
                {objectives.map((objective, index) =>
                    <li key = {index}>{JSON.stringify(objective.objectiveDate)}</li>
                )}
            </ul>
        </div>
    );
};

export default ObjectiveList;

 

 

Uncaught Error: Objects are not valid as a React child (found: [object Date]). If you meant to render a collection of children, use an array instead.  리액트 에러 해결