[React] 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` 오류를 해결해보자!

 

 

 

 1. 아래와 같은 오류가 떴는데, 이는 <input> 태그 사용 시 value 속성을 고정값으로 설정하지 않아서 생기는 오류이다. 

 

 

 

 오류가 생긴 부분의 코드 

const MyCourseCalendar = () => (
  <>
    <input
      className={styles["mycourse-time-container"]}
      type="datetime-local"
      id="meeting-time"
      name="meeting-time"
      value="2023-04-15T19:30" // 변하는 값
      min="2023-04-15T00:00"
      max="2023-04-16T00:00"
    ></input>
  </>
);

export default MyCourseCalendar;

 

 

 

 2. 해결방법: value 속성을 defaultValue로 변경한다. 

 

const MyCourseCalendar = () => (
  <>
    <input
      className={styles["mycourse-time-container"]}
      type="datetime-local"
      id="meeting-time"
      name="meeting-time"
      defaultValue="2023-04-15T19:30" // defaultValue로 변경
      min="2023-04-15T00:00"
      max="2023-04-16T00:00"
    ></input>
  </>
);

export default MyCourseCalendar;