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

components/MapComponent.js

@@ -21,7 +21,7 @@ import ShowAddStationPopup from "./ShowAddStationPopup";
 //import { createRoot } from "react-dom/client";
 
 const MapComponent = ({ locations, onLocationUpdate }) => {
-  const [poiTypData, setPoiTypData] = useRecoilState(poiTypState); // Recoil State verwenden
+  const [poiTypData, setPoiTypData] = useState(poiTypState); // Recoil State verwenden
   const poiLayerRef = useRef(null); // Referenz auf die Layer-Gruppe für Datenbank-Marker
   const mapRef = useRef(null); // Referenz auf das DIV-Element der Karte
   const [map, setMap] = useState(null); // Zustand der Karteninstanz
@@ -415,11 +415,7 @@ const MapComponent = ({ locations, onLocationUpdate }) => {
     // Create a root container for the React component inside the popup
     const root = ReactDOM.createRoot(container);
 
-    root.render(
-      <RecoilRoot>
-        <ShowAddStationPopup map={map} latlng={e.latlng} />
-      </RecoilRoot>
-    );
+    root.render(<ShowAddStationPopup map={map} latlng={e.latlng} />);
 
     // Create and configure the popup
     L.popup().setLatLng(e.latlng).setContent(container).openOn(initMap);

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: