Estoy probando material ui select pero no funciona como me gustaría. no muestra el valor predeterminado cuando uso la función de mapa, pero sí cuando se usa de forma tradicional.
*** La forma en que funciona ***
<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>la entrada muestra el Reino Unido como el país seleccionado por defecto
*** El camino que NO funciona ***
<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>la entrada no muestra el Reino Unido como el país seleccionado de forma predeterminada
El valor que se asigna a MenuItem debe coincidir con el valor que estableció para la propiedad defaultValue en la selección.
por ejemplo: [{nombre:"Reino Unido"}] . "Reino Unido" debe ser el valor predeterminado
<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>