[리액트] select box (option이 많을때 ,list map으로 옵션 불러오기)

select box를 만들때,

옵션이 많으면 <select/> 내부에 <option>이 많아지면서 길어지면 보기가 싫다..

 

그래서 해결방안

import React, { useState, useRef } from "react";

const options = [
        { value: "iron", name: "아이언"},
        { value: "silver", name: "실버"},
        { value: "gold", name: "골드"},
        { value: "platinum", name: "플레티넘"},
        { value: "diamond", name: "다이아몬드"},
        { value: "master", name: "마스터"},
        { value: "grandmaster", name: "그랜드마스터"},
        { value: "challenger", name: "챌린저"},
]
    
export function Example() {
	return(
    	<select>
            {options.map((option) => (
                <option key={option.value} value={option.value}>
                    {option.name}
                </option>
            ))}
        </select>
    );
}