複数の選択肢から選ぶ

memoのような自由にテキストをsupabaseに送信するのではなく、ユーザーに特定の選択肢のみ選ばせたい場合

valueに選択肢をセットする

• HTMLタグのselectとoptionをセットで使うことで、選択肢をブラウザに作れる
• 送るデータはvalue=””の値を使う

            <select onChange={(e) => setCategory(e.target.value)}>
              <option value="1">1</option>
              <option value="2">2</option>
              <option value="3">3</option>
            </select>

===

supabase挿入は他と同様

===========

const [category, setCategory] = useState("");
===========

const handleSubmit = async (e) => {
    e.preventDefault();
    try {
      const { data: memoData, error: postError } = await supabase
        .from("memos")
        .insert([{ title, memo, url, category }]);
      if (postError) {
        throw postError;
      }
      setTitle("");
      setMemo("");
      setUrl("");
      fetchMemos(); // 追加後にメモを再取得して更新
    } catch (error) {
      console.error("Error adding post:", error.message);
    }
  };

注意点

onChange

以下の場合は、onChangeイベントが起こらないのでsupabaseにはEMPTYが送られる

==

①選択肢を初期値のままsubmit

②(２回目以降)選択肢の変更無しでsubmit

==

①の対処 : 肢を増やしてonChangeを発生させる

              <option disabled selected className="hidden">
                カテゴリー(空でもOK)
              </option>

②の対処 : handleSubmit時にsetCategory()を使わない = 前回のvalueがstateに保存されている

shadcn ui

• SelectコンポーネントのどこにonChangeイベントを置けばいいのかわからず
• ブラウザからshadcn (select)のtailwindをコピーして、select/optionタグのclassNameにペーストすると見た目は近づけられる