Dynamically updating dropdown menu in React - reactjs

Question

Using fetch, I want to dynamically populate the City material-ui dropdwon (Select) when I select a value from the State dropdown, but could not do so. When I do the same without using the fetch, it works fine. I think the problem is with the promise being returned by the fetch call. There is no problem in the fetch call as I can see the list of cities in return. Please suggest how to do it.
import React from 'react';
import { createStyles, makeStyles, Theme } from '#material-ui/core/styles';
import InputLabel from '#material-ui/core/InputLabel';
import FormHelperText from '#material-ui/core/FormHelperText';
import FormControl from '#material-ui/core/FormControl';
import {Select, MenuItem} from '#material-ui/core';
import './App.css';
export function getStates() {
return [
{name: 'California', id: "1"},
{name: 'New York', id: "2"},
]
}
function Home() {
const useStyles = makeStyles((theme: Theme) =>
createStyles({
formControl: {
margin: theme.spacing(1),
minWidth: 120,
},
selectEmpty: {
marginTop: theme.spacing(2),
},
}),
);
const [State, setState] = React.useState([]);
const [cities, setCities] = React.useState([]);
const selectStyle = makeStyles(theme => ({
root: {
textDecoration: 'none',
color: 'red',
alignItems: 'center',
fontWeight: "bold",
display: "flex",
justifyContent: "space-around",
fontSize: 18,
margin: 0,
'&:hover': {
textDecoration: 'none'
}
},
}));
function getCities() {
var s = '' // JSON body goes here
const fetchData = async () => {
const cities = [];
try {
const res = await fetch('http://127.0.0.1:8080',
{
method : "POST",
headers: {"content-type": "text/plain"},
body: s
}
);
const data = await res.json();
console.log("state response status: " + res.status)
for(var key in data.cities) {
cities.push({id: key, name: data.cities[key]})
}
return cities;
}
catch (err) {
console.log("Fetch Exception: " + err)
}
}
const cities = fetchData();
return cities;
}
const handleStateChange = (event: React.ChangeEvent< { value: unknown} >) => {
setState(event.target.value);
const r = getCities();
setCities([r]);
}
const fixed_states = getStates();
const classes = useStyles()
const selectClass = selectStyle()
return (
<div className="main-select">
<container>
<FormControl required className={classes.formControl}>
<InputLabel id="sel">State</InputLabel>
<Select labelId="state_select_labelid" id="state_select_id" name="state_select_name" onChange={handleStateChange} className={selectClass.root}>
{fixed_states.map(({id, name}, index) => (
< MenuItem key={id} value={name}>
{name}
</MenuItem>
)) }
</Select>
<FormHelperText></FormHelperText>
</FormControl>
<FormControl required className={classes.formControl}>
<InputLabel id="city_input_label_id">City</InputLabel>
<Select labelId="city_select_labelid" id="city_select_id" name="city_select_name">
{cities.map(({id, name}, index) => (
< MenuItem key={id} value={name}>
{name}
</MenuItem>
))}
</Select>
<FormHelperText></FormHelperText>
</FormControl>
</container>
</div>
);
}
export default Home;

Answer 1

You code:
const handleStateChange = (event: React.ChangeEvent< { value: unknown} >) => {
setState(event.target.value);
const r = getCities();
setCities([r]);
}
but getCities return array of cities and then you set array cities in state like array of array.
So just update argument in setCities row to
const handleStateChange = (event: React.ChangeEvent< { value: unknown} >) => {
setState(event.target.value);
const r = getCities();
setCities(r);
}