[React.js] Warning: Use the 'defaultValue' or 'value' props on <select> instead of setting 'selected' on <option>

Warning Message

Warning: Use the 'defaultValue' or 'value' props on <select> instead of setting 'selected' on <option>

 

Warning Message가 발생하는 이유

일반적인 HTML에서 <select>에 기본값을 설정하는 방법은 option 요소 중 하나에 selected 속성을 추가하는 것이다.

하지만 React에서는 다음과 같이 option 태그에 selected를 사용하면 경고가 발생한다.

<select
  name="select"
  onChange={handleChange}>
  <option selected value="1">First</option>
  <option value="2">Second</option>
  <option value="3">Third</option>
</select>

 

해결방법

select 태그에 defaultValue를 사용해 기본값을 설정할 수 있다.

<select
  name="select"
  defaultValue={""}
  onChange={handleChange}>
  <option value="1">First</option>
  <option value="2">Second</option>
  <option value="3">Third</option>
</select>