[React Error] warning: You provided a `value` prop to a form field without an `onChange` handler. This will render a read-only field. If the field should be mutable use `defaultValue`. Otherwise, set either `onChange` or `readOnly`. 해결 방법

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

 

발생 원인

form 필드에 value를 사용하면서 onChange 핸들러를 설정하지 않아 발생하는 에러

나의 경우 disabled 옵션을 설정하면서 onChange 옵션을 제거해서 에러가 발생했음

<textarea
  className="form-control"
  value={value}
  disabled={true}
/>

 

---

해결 방법

onChange 핸들러를 설정하거나 defaultValue 설정을 해주거나 readOnly 옵션 추가해라라는 힌트를 주지만 readOnly 옵션은 제대로 작동하지 않음

 

1. onChange 핸들러 설정

const onChange = () => {
    // onChange 이벤트 
}

<textarea
  className="form-control"
  value={value}
  disabled={true}
  onChange={onChange}
/>

2. defaultValue 옵션 설정
value 옵션을 defaultValue로 변경

<textarea
  className="form-control"
  defaultValue={value}
  disabled={true}
/>