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

개요

styled-component 사용 시 발생하는 'input is a void element tag and must neither have children nor use dangerouslySetInnerHTML' 오류 해결 방법 안내: input 태그 내 자식 요소 삽입 시 발생하는 문제와 그 해결책을 설명합니다. 올바른 value 속성 사용법 포함.

원인

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

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

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

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

반응형

해결책

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

안에 값을 제거해준다.

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