[React] You provided a 'checked' prop to a form field without an 'onChange' handler (error)

Yuri Lee·2022년 4월 25일
0

Intro

React 에서 체크박스(Checkbox) 사용 시 아래와 같은 에러가 발생했다.

Warning: Failed prop type: 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.

Why

onClick 핸들러를 통해 조건에 따라 checked 값을 주는 식으로 코딩하면 이런 에러 메시지가 발생한다. checked 값을 핸들링하려면 onChange 핸들러를 사용해야 하기 때문이다.

How to solve

  1. onClick 핸들러를 없애고 onChange 핸들러를 사용한다.
  2. onClick 핸들러를 그대로 두고 싶으면 readonly 키워드를 붙이거나 checked 속성 대신 defaultChecked를 사용한다.

나는 2번의 readonly 키워드를 사용하여 해당 에러를 해결할 수 있었다. 👍


https://devbirdfeet.tistory.com/159
https://devlog.jwgo.kr/2018/11/28/checkbox-error-with-react/

profile
Step by step goes a long way ✨

0개의 댓글