Uncaught Error: Objects are not valid as a React child 에러 해결

 

Uncaught Error: Objects are not valid as a React child (found: object with keys {providerId,
emailVerified, isAnonymous, tenantId, providerData, proactiveRefresh, reloadUserInfo, reloadListener, uid, auth,
stsTokenManager, accessToken, displayName, email, phoneNumber, photoURL, metadata}).
If you meant to render a collection of children, use an array instead.

 

문제 원인

React component를 렌더링할 때, 데이터를 화면에 표시하려면 표시하려는 데이터 타입에 맞는 데이터를 넣어주어야 한다. 컴포넌트로 전달된 데이터와 표시하려는 데이터의 타입이 일치하지 않으면 다음과 같은 에러가 발생한다.

 

--> 데이터 타입이 Object객체를 그대로 렌더링 하려고 했기 때문에 에러가 발생하였다.

 

해결

export default function Navigation({ userObj }) {
    return (
        <ul>
            <li>
                <Link to="/">Home</Link>
            </li>
            <li>
                <Link to="/profile">{userObj}의 Profile</Link>
            </li>
        </ul>
    );
}

 

 

--> <Link to="/profile">{userObj.displayName}의 Profile</Link>