Warning: Functions are not valid as a React child. This may happen if you return a Component instead of from render. Or maybe you meant to call this function rather than return it.

| 문제상황

React에서 HOC를 적용하는 과정에서 아래와 같은 에러가 발생했다.

1. 오류 발생 코드

2. 발생 오류

Warning: Functions are not valid as a React child. This may happen if you return a Component instead of from render. Or maybe you meant to call this function rather than return it.

| 원인 분석

현재 실습중인 강의 내용은 이전 버전의 react 문법을 따르고 있어서 <Routes> 대신 <Switch>가 사용되었고, <Route>의 component 속성이 사용되었다. 이 부분을 최신 버전으로 반영하고자, 필자는 component 대신 element 속성을 사용하였다. 하지만, element 속성에 값을 {}로 전달하기 때문에 함수를 넣을 수 없는 문제가 있었다.

 

| 해결 방법

1. element = {}에 넣기전 hoc 함수를 적용시킨다.

2. hoc 함수를 각각의 컴포넌트의 export시 적용