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

해버니·2022년 12월 22일
1

TIL

목록 보기
5/9
post-thumbnail

react에서 select를 다루다가 오류를 만났다.


<div id="selectP">
	<select value={index} onChange={onSelect} id="select">
		<option value="choose" disabled selected>Select Your Units</option>
		<option value="0">Minutes & Hours</option>
		<option value="1">Km & Miles</option>
	</select>
</div>  

위에 opetion에서 **selected**를 사용했을 때 나타나는 경고이다. react에서는 경고가 발생하고 selected를 쓰면 안 된다.






<div id="selectP">
	<select value={index} onChange={onSelect} id="select">
		<option value="default" disabled>Select Your Units</option>
		<option value="0">Minutes & Hours</option>
		<option value="1">Km & Miles</option>
	</select>
</div>    

최상위 select에 defaultValue를 지정하여 맨 처음에 보일 수 있게 했다.





disabled를 사용하여 맨 위 select 부분은 선택이 되지 않는다.

0개의 댓글