38 lines
1.1 KiB
TypeScript
38 lines
1.1 KiB
TypeScript
"use clien";
|
|
import React, { useEffect, useState } from "react";
|
|
|
|
export default function SelectAreas() {
|
|
const [areas, setAreas] = useState([]); // aquí guardaremos los datos del servidor
|
|
const [selectedArea, setSelectedArea] = useState("");
|
|
|
|
// useEffect se ejecuta una vez al montar el componente
|
|
useEffect(() => {
|
|
fetch("https://venus.acatlan.unam.mx/asignacionTiempo_test/area-ubicacion")
|
|
.then((response) => response.json())
|
|
.then((data) => {
|
|
console.log("Áreas obtenidas:", data);
|
|
setAreas(data);
|
|
})
|
|
.catch((error) => {
|
|
console.error("Error al traer las áreas:", error);
|
|
});
|
|
}, []);
|
|
|
|
const handleChange = (e) => {
|
|
setSelectedArea(e.target.value);
|
|
console.log("Área seleccionada:", e.target.value);
|
|
};
|
|
|
|
return (
|
|
<div>
|
|
<label htmlFor="areaSelect">Selecciona un área:</label>
|
|
<select id="areaSelect" value={selectedArea} onChange={handleChange}>
|
|
<option value="">-- Selecciona una opción --</option>
|
|
{areas.map((area) => (
|
|
|
|
))}
|
|
</select>
|
|
</div>
|
|
);
|
|
}
|