Reactでselectの初期値を可変にする方法

アプリ制作の中でselectの初期値をその日によって変えたいという要件が出てきました。
調べても良い情報が見つけられなかったのでChatGPTに聞いてみました。
それが以下のコードです。

import { useEffect, useState } from 'react';

function App() {
  const [selected, setSelected] = useState('');

  useEffect(() => {
    // selectの初期値をorangeにしたい時
    setSelected('orange');
  }, []);

  // 選んだoptionを選択状態にする処理
  function handleChange(event) {
    setSelected(event.target.value);
  }

  return (
    <>
      <select name="fruits" value={selected} onChange={handleChange}>
        <option value="apple">Apple</option>
        <option value="orange">Orange</option>
        <option value="banana">Banana</option>
      </select>
    </>
  );
}

export default App;

ざっくりとした仕組み

select要素にvalue属性を設定します。
option要素のvalueと同じものを設定するとそのoption要素が選択状態になります。

ただvalueを設定するのみだと初期値から変更できなくなってしまいます。
その為select要素にonChangeイベントを設定します。
onChangeでhandleChangeを実行しページ上で選択したoptionを選択状態にする処理を行います。

useEffect内の処理について

useEffectの中で初期値に設定したいvalueを選びます。
今回は説明用に最小構成としているので無条件でorangeになっています。
例えば月曜日ならApple、火曜日ならBananaみたいな処理をここに書きます。

さいごに

最初はChatGPTに言われるがまま書いて使いましたが後からしっかり仕組みを理解したいと思いこの記事を書きました。
optionにselected属性を設定するよりもこちらのほうがおすすめらしいです。
少しでも情報の足しになれば幸いです。