[React] input is a void element tag and must neither have `children` nor use `dangerouslySetInnerHTML` 오류

개요

 

웹 UI를 제작하던 도중

오류를 console에서 만나게 되었다.

 

원인

 

styled-component 사용 시 발생하는 문제로

<input/> 등과 같이 자식을 가질 수 없는 태그에 자식을 넣었을 때 발생하는 에러이다.

<input type="button" onClick={(e) => handleChange(e)}>{val}</input>

이렇게 input태그 사이에 UI에 나타나길 원하는 값(val)을 넣었더니 에러가 났다. 

 

해결책

 

<input type="button" value={val} onClick={(e) => handleChange(e)}></input>

<input></input> 안에 값을 제거해준다.

값을 넣고싶다면 input태그 내 value를 이용한다.