[해결 방법] Adjacent JSX elements must be wrapped in an enclosing tag

⚛️ 기본 환경: IDE: VS code, Language: React

 

 

발생 Error

React에서 다음 Source Code를 실행할 경우,

⚠️ 다음과 같은 Error 발생

Adjacent JSX elements must be wrapped in an enclosing tag

 

 

발생 원인

React에서 컴포넌트는 하나의 최상위 엘리먼트만 반환할 수 있음
→ React에서 JSX 구문을 JavaScript 코드로 변환할 때, return 구문에서 여러 개의 최상위 엘리먼트를 반환하면 컴파일 오류 발생

 

 

해결 방법

select 엘리먼트와 input 엘리먼트를 하나의 최상위 엘리먼트에 포함