[리액트/에러해결] Uncaught Error: input is a void element tag and must neither have `children` nor use `dangerouslySetInnerHTML`

⚠️ 에러내용

 

❓ 에러발생이유

styled-components를 사용해 input 컴포넌트를 생성한후 input 컴포넌트 안에 자식 태그를 넣어주었다

<Input>
  <button onClick={addBucketList}>추가하기</button>
</Input>

const Input = styled.input`
  max-width: 350px;
  min-height: 10vh;
  background-color: #fff;
  padding: 16px;
  margin: 20px auto;
  border-radius: 5px;
  border: 1px solid #ddd;
`;

 

❗️ 해결방법

input 태그는 자식 태그를 가질 수 없기 때문에 태그를 감싸주고 싶다면 div를 사용해야한다