FrontEnd/React.js
[React.js] Warning: Use the 'defaultValue' or 'value' props on <select> instead of setting 'selected' on <option>
푸고배
2021. 11. 26. 20:12
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>
반응형