[Error] Warning: You provided a `checked` prop to a form field without an `onChange` handler. This will render a read-only field. If the field should be mutable use `defaultChecked`. Otherwise, set either `onChange` or `readOnly`.

에러 발생

todomvc를 만드는데 아래와 같은 에러가 발생했다.

 

Warning: You provided a `checked` prop to a form field without an `onChange` handler. This will render a read-only field. If the field should be mutable use `defaultChecked`. Otherwise, set either `onChange` or `readOnly`.

 

발생 원인

todomvc에서 해당 부분은 아래와 같은 코드로 구성되어있다.

    itemElement = (
      <div className="view">
        <input className="toggle" type="checkbox" checked={checked} />
        <label onDoubleClick={onDoubleClickHandler}>{content}</label>
        <button className="destroy" />
      </div>
    );

checked는 event delegation으로 해당 태그의 className이 toggle 일 때, useState로 정의된 checked 값(boolean)을 toggle 해준다.

 

checked 값에 따라 input의 value가 결정되기 때문에,  input 요소는 입력 요소로 쓰이지 않았다. Warning은 이러한 input 요소에 onChange 속성을 넣어서 입력 요소로 쓰이게 하거나, readOnly를 넣어서 입력 요소로 쓰이지 않게 명시하거나 둘 중 하나를 표현하라는 경고이다.

 

해결 방법 

input 태그에 readOnly를 추가한다.

    itemElement = (
      <div className="view">
        <input className="toggle" type="checkbox" checked={checked} readOnly />
        <label onDoubleClick={onDoubleClickHandler}>{content}</label>
        <button className="destroy" />
      </div>
    );

 

해결!