[javascript/react] select & option

저는 cj 사이트 보고 만든거라 내용이 다릅니다. 참고만해주세요.

1. select 하기 전에 우선 상수데이터를 만들어줍니다.

const OPTION_LIST = [
{
	id: 1,
    group: '사과',
    list: [{ id: 2, value: 'https://www.cj.net/', title:'딸기' }]
},
{
	id: 3,
    group: '파이앤플',
    list: [
    { id: 4, value: 'http://www.cj.co.kr/kr/index', title: '포도' },
  {
  	id:5,
    value: 'http://www.cjfreshway.com/index.jsp',
  },
],
},
{
	id: 7,
    group: '소금',
    list: [
    {
    	id:8,
        value: 'https://www.cj.co.kr/kr/about/business/bio',
        title: '설탕',
        },
       },
      },
{
		id: 9,
        group: '고구마',
        list: [
        {
        	id: 10,
            value: 'https://www.cjlogistics.com/ko/main;,
            title: '오렌지'
         }
        ],
       }
      ];
      export default OPTION_LIST
     ```
2. select 안에 map을 사용해서 부릅니다.

const [siteUrl, setSiteUrl] = useState();
 const navigate = useNavigate();
 const handleChange = e => {
   setSiteUrl(e.target.value);
 };
 const goSite = () => {
   navigate(`/${siteUrl}`);
 };
return (
	<div>
 		<Select onChange={handleChange} value={siteUrl}>
         {OPTION_LIST.map(info => (
         	<optgroup label={info.group} key={info.group}>
             {info.list.map(el => (
             	<option value={el.value} key={el.id}>
                 {el.title}
             </option>
             ))}
         </optgroup>
         ))}
         </select>

3. 기능을 작동시킬 버튼을 만듭니다.

   <GoBtn href={siteUrl} onClick={gosite} target="_blank" rel="noreferror">
   GO
   </GoBtn>
   </div>
   );
   }