Failed prop type: You provided a `checked` prop to a form field without an `onChange` handler.

[gloriaJun]

Test Scenario

 <input type="radio"  name="gender" id={item.id} className="rdo-box__ipt" checked={isChecked} />

Error Log

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`.

Solution

1. Use onChange instead of onClick
2. Use readOnly
3. Use defaultChecked instead of checked

 <input type="radio"  name="gender" id={item.id} className="rdo-box__ipt" defaultChecked={isChecked} />

Reference

• 리액트에서 체크박스 사용 시 에러가 발생할 때 해결방법

[Muhammad-Shafaf123]

In my case, I can't use defaultChecked, because I'm trying to change the value of the checkbox with the help of another button click function...!:neutral_face:, I try checked instead of defaultChecked then it works properly. but the console is shown the message

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