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

 

 

react 로 Component를 새로 만들면서

styled Component를 사용해야 하는데 난 에러!

 

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

 

 

 

---

해결 과정

styled component 를 사용해 input 을 만든 후에 자식 tag를 넣어줘서 발생한 에러.

input은 자식 tag(children)을 가질 수 없기 때문에 감싸주는 것은 div로 바꿔줘야 함 

 

수정 전

//styled Component 생성
const IconWrapper = styled.input`
  display: flex;
  flex-direction: column;
`;


//return
<IconWrapper>
          <Icon />
          <Icon />
</IconWrapper>

수정 후

//styled Component 생성
const IconWrapper = styled.div`
  display: flex;
  flex-direction: column;
`;


//return
<IconWrapper>
          <Icon />
          <Icon />
</IconWrapper>

 

component를 여러개 만들다가 오타로 들어간 것 같다.