DropDownmenü Element von API aufrufen in Kontextmenü ->Popup-> Station hinzufügen

components/ShowAddStationPopup.js

@@ -1,20 +1,43 @@
 // components/ShowAddStationPopup.js:
 import React, { useState, useEffect } from "react";
 import ReactDOM from "react-dom";
-import { useRecoilState } from "recoil";
-import { poiTypState } from "../store/poiTypState";
 
 const ShowAddStationPopup = ({ map, latlng }) => {
-  const [poiTypData, setPoiTypData] = useRecoilState(poiTypState);
+  const [poiTypData2, setpoiTypData2] = useState(); // Recoil State verwenden
+
   const [name, setName] = useState("");
   const [poiTypeId, setPoiTypeId] = useState("");
   const [latitude] = useState(latlng.lat.toFixed(5));
   const [longitude] = useState(latlng.lng.toFixed(5));
 
-  // Effekt zum Ausgeben von poiTypData in der Konsole
+  // Effekt zum Ausgeben von poiTypData2 in der Konsole
   useEffect(() => {
-    console.log("poiTypData in ShowAddStationPopup.js :", poiTypData);
-  }, [poiTypData]);
+    console.log("poiTypData2 in ShowAddStationPopup.js :", poiTypData2);
+  }, [poiTypData2]);
+
+  //------------------------------------------
+  // Funktion zum Abrufen der poiTyp Daten
+
+  useEffect(() => {
+    const fetchpoiTypData2 = async () => {
+      try {
+        const response = await fetch("/api/poiTyp");
+        const data = await response.json();
+        setpoiTypData2(data); // Daten im Recoil State speichern
+      } catch (error) {
+        console.error("Fehler beim Abrufen der poiTyp Daten:", error);
+      }
+    };
+
+    fetchpoiTypData2();
+  }, []);
+
+  // Effekt zum Loggen der poiTypData2, wenn sie sich ändern
+  useEffect(() => {
+    console.log("poiTypData2 aktualisiert:", poiTypData2);
+  }, [poiTypData2]);
+
+  //----------------------------------------------------
 
   const handleSubmit = (event) => {
     event.preventDefault();
@@ -39,23 +62,25 @@ const ShowAddStationPopup = ({ map, latlng }) => {
         />
       </div>
       <div className="flex items-center mb-4">
-        <label htmlFor="idPoiTyp" className="block mr-2 flex-none">
+        <label htmlFor="idPoiTyp2" className="block mr-2 flex-none">
           Typ:
         </label>
         <select
-          id="idPoiTyp"
-          name="idPoiTyp"
+          id="idPoiTyp2"
+          name="idPoiTyp2"
           value={poiTypeId}
           onChange={(e) => setPoiTypeId(e.target.value)}
           className="block p-2 w-full border-2 border-gray-200 rounded-md text-sm" // Adjusted width
         >
-          {poiTypData.map((poiTyp) => (
-            <option key={poiTyp.id} value={poiTyp.id}>
-              {poiTyp.name}
-            </option>
-          ))}
+          {Array.isArray(poiTypData2) &&
+            poiTypData2.map((poiTyp, index) => (
+              <option key={poiTyp.id || index} value={poiTyp.id}>
+                {poiTyp.name}
+              </option>
+            ))}
         </select>
       </div>
+
       <div className="flex items-center mb-4">
         <label htmlFor="lat" className="block mr-2 flex-none">
           Breitengrad: