[React Error] error - Error: input is a void element tag and must neither have `children` nor use `dangerouslySetInnerHTML`.

문제 상황

styled component로

열심히 emotion 태그를 만들었는데

갑자기 아래와 같은 에러가 발생하면서

실행이 되지 않았다.

 

# 터미널의 에러문구
error - Error: input is a void element tag and must neither have `children` nor use `dangerouslySetInnerHTML`.

# 브라우저 상 에러문구
Server Error Error: input is a void element tag and must neither have `children` nor use `dangerouslySetInnerHTML`. This error happened while generating the page. Any console logs will be displayed in the terminal window.

input is a void element tag and must neither have `children` nor use `dangerouslySetInnerHTML`.

input 은 void 요소 태그이고 자식 태그를 가질 수 없다고 한다.

 

문제 원인

input은 자식 태그(children)를 가질 수 없는데 내가 input 안에 자식 태그를 넣어줬던것!

 

 

 

<WriterInput> 태그로 하위 태그들을 감싸줬는데

 

 

태그 타입을 확인해보니 input으로 해놨었다.

div 태그로 바꿔서 해결!

 

 

---

Reference

 

https://rrecoder.tistory.com/122

[react 에러 ]Error: input is a void element tag and must neither have `children` nor use `dangerouslySetInnerHTML`.