React MUI Select Object not showing selected value

user_14203035 0
Viewed 2628

Hey I am stuck with a problem, I using MUI select function for me to select a country. not sure why when I selected the country it change its value but when inside the select box it does not show anything.

const [selectedCountry, setSelectedCountry] = useState({});
 const handleChangeCountry = (event) => {
    setCountryValue(event.target.value);
  };
<FormControl sx={{ m: 1, width: 400 }}>
                <InputLabel id="country-label">Country</InputLabel>
                <Select
                  labelId="country-label"
                  id="country"
                  value={selectedCountry}
                  onChange={handleChangeCountry}
                  MenuProps={MenuProps}
                >
                  {countryList.map((data,index) => (
                    <MenuItem
                      key={data.name}
                      value={data}
                    >
                      {data.name}
                    </MenuItem>
                  ))}
                </Select>
<p className="text-black">{selectedCountry.name}</p>
<p className="text-black">{JSON.stringify(selectedCountry, null, 2)}</p>

enter image description here

As you can see, below the blue background color text show the country that I selected, but in the select box is not showing. Not sure where I am doing wrong. Thanks for helping advance.

material-ui reactjs object
1 Answers

Your useState hook has the set function called setSelectedCountry but on handleChangeCountry you try to use setCountryValue which does not update selectedCountry based on your provided code, please change it like this:

 const [selectedCountry, setSelectedCountry] = useState({});
 const handleChangeCountry = (event) => {
    setSelectedCountry(event.target.value);
  };

Also, it seems that selectedCountry is supposed to be an object? in that case please try passing the Select value as selectedCountry.name:

<Select
  labelId="country-label"
  id="country"
  value={selectedCountry.name}
  onChange={handleChangeCountry}
  MenuProps={MenuProps}
>
user_80096380
Related