React プルダウンメニュー

表示のやり方について

今まで私はReactでプルダウンメニューを作ったことがなかったのでやり方を知らなかったのですがめっちゃ便利ですねww
今までアホみたいにSelectタグに入れてたのがバカみたいです

const categories = ["Tシャツ", "パンツ", "ジャケット"];
<select
    name="category"
    value={formData.category}
    onChange={handleChange}
    className="block w-full px-3 py-2 mt-1 text-black bg-white border border-gray-300 rounded-md shadow-sm focus:outline-none focus:ring-indigo-500 focus:border-indigo-500 dark:bg-gray-800 dark:text-white"
    required
>
    <option value="">カテゴリを選択してください</option>
    {categories.map((category, index) => (
    <option key={index} value={category}>
        {category}
    </option>
    ))}
</select>

今回私がTailWIndを使って書いているのですがそれは置いといて、、、w
面白いのがconstでselectの中身を定義してそれをmap関数でkey,valueで回しているということです！！(知っていたらごめんなさい)
今更なのですがmap関数の挙動についてみてみたいと思います

map関数は、配列の各要素に対して指定された関数を実行し、その結果を新しい配列として返すメソッドです。元の配列には変更を加えず、同じ要素数の新しい配列を返します。らしいです　by ChatGPT

要するに元の配列を残しつつその中身を取り出したりごちゃごちゃできるよーとのことです。今回のコードをようやくすると

{categories.map((category, index) => (...)}：categories配列（["Tシャツ", "パンツ", "ジャケット"]など）から、それぞれの要素を取り出して<option>要素を生成します。
• key={index}：Reactに必要な一意のキーです。リストをレンダリングするときに、各項目を識別するために使用します。
• value={category}：オプションの値です。ユーザーが選択すると、この値がformData.categoryにセットされます。
• {category}：オプションに表示されるテキストです。

ということになるらしいですwまだまだ勉強不足ですね

ですが今回でReactのプルダウンバーの追加方法・map関数の挙動について学べたのかなと感じました！！
近しいうちにTailWIndの方についても触れてみたいと思います！！