I am very new to react and having a struggle in reaching the Flask API endpoint on form submit. The code is not throwing an error, and it seems the endpoint is not being reached. Sharing the code below, any insight would be very helpful. Thanks in advance.
function App() {
const [data, setData] = useState([]);
const [dropdownvalue, setDropdown] = useState("");
const [message, setMessage] = useState("");
function handleSubmit(e){
try {
const res = fetch("http://localhost:5000/getEmployees", {
method: "POST",
body: JSON.stringify({
dropdownvalue: e.target.value,
}),
});
const resJson = res.json();
if (res.status === 200) {
setMessage("resultselt fetched successfully");
} else {
setMessage("Some error occured");
}
} catch (err) {
console.log(err);
}
};
useEffect(() => {
fetch("/getEmployees")
.then((response) => response.json())
.then((id) => {
const parsed = JSON.parse(id.employees);
const ids = Object.entries(parsed).map(([key, value]) => ({
label: value,
value: value
}));
setData(ids);
console.log(parsed,ids);
});
}, []);
return (
<div>
<form onSubmit={handleSubmit}>
<Select
options={data}
/>
<button type="submit"></button>
<div className="message">{message ? <p>{message}</p> : null}</div>
</form>
</div>
)
}
export default App;