Reactでselectタグのselected属性を用いて初期選択状態を作ろうとするとエラーが発生する。
<select>
<option value="apple">Apple</option>
<option value="banana" selected>Banana</option>
<option value="grape">Grape</option>
</select>
// Warning: Use the `defaultValue` or `value` props on <select> instead of setting `selected` on <option>.
上記のエラーを読み取ると、どうやらReactでselectの初期選択状態を実装したい場合は、selected属性ではなくdefaultValue属性かvalue属性を使用しないといけないとのこと。
(React公式ドキュメントにも書かれていました。)
以下のようにvalue属性を用いて実装するとエラーを解消できる。
<select value={ optionState } onChange={ (e)=>setOptionState(e.target.value) }>
<option value="apple">Apple</option>
<option value="banana">Banana</option>
<option value="grape">Grape</option>
</select>
selectタグのvalue属性で指定した値と一致するoptionタグが初期選択状態になる。
また、value属性にステートを用いる場合は、onChangeでステート更新する必要がある。