Im trying material ui select but it is not working as i would like to. it is not showing the default value when i use the map function but it does when using the traditional way.
*** The way which is working ***
<Select
id="standard-select-categories"
defaultValue="UK"
label="Select Country"
name="country"
select
variant="standard"
>
<MenuItem value="USA">
USA
</MenuItem>
<MenuItem value="UK">
UK
</MenuItem>
<MenuItem value="Japon">
Japon
</MenuItem>
</Select>
input shows UK as the selected country by default
*** The way which is NOT working ***
<Select
id="standard-select-categories"
defaultValue="UK"
label="Select Country"
name="country"
select
variant="standard"
>
{Countries_Flags.map((option) => (
<MenuItem
key={option.name}
value={option.name}
>
{<img src={option.flag} alt={option.name} className="select-country-items" />}
{option.name}
</MenuItem>
))}
</Select>
input doesnt show UK as the selected country by default
The value being assigned to the MenuItem needs to match the value you set for the defaultValue prop on the select.
eg: [{name:"United Kingdom"}] . "United Kingdom" should be the defaultValue
<Select
id="standard-select-categories"
defaultValue="United Kingdom"
label="Select Country"
name="country"
select
variant="standard"
>
// "United Kindom" for the defaultValue prop
<MenuItem value={"United Kindom"}>UK</MenuItem>
// "United States of America" for the defaultValue prop
<MenuItem value={"United States of America"}>USA</MenuItem>
</Select>