今天開始要進入最重要的一環 — 徵旅伴文章，這個部分包含了列表頁、詳細頁以及編輯頁，今天會先從編輯產出資料開始。

列表頁中可以依分類做篩選，所以編輯頁面會有一個項目是需要選擇分類的，這個功能就是今日目標。

Cloud Firestore

徵旅伴文章編輯頁需要有一個分類地區的功能，在這我使用了firestore這個雲端數據庫，將分類先建立好，之後再到畫面讀去出來。

資料建立好後要回到程式端去撈資料作呈現。

將區域select在component資料夾下建立一個js，引入firestore，做出一個剛剛建立好的continent集合陣列，最後將每個option都map出來，這樣就大功告成拉!

這段看似簡單但我卻在這邊卡了幾小時，寫法參照官方文件，將不同的地方做調整。一直到這樣的寫法才成功!

import firebase from 'firebase/compat/app';
import 'firebase/compat/firestore';
import { useEffect, useState } from 'react';

function Continent(){
    const [continent, setContinent] = useState([])
    useEffect(()=>{
        const db = firebase.firestore();
        const ref = db.collection('continent');
        ref.get().then(querySnapshot => {
            const continentArry = querySnapshot.docs.map(doc => (
                {
                  value: doc.id,
                  content: doc.data().value
                } 
              ));
            setContinent(continentArry)
        });      
    }, [])
    return(
        <select name="continent" id="continent" required>
            {
                continent.map(option=>{
                    return <option value={option.value} key={option.value}>{option.content}</option>
                })
            }
        </select>
    )
}

export default Continent