React Material Select Options Not Populating

Question

I am iterating and producing MenuItems... when I console.log I see the items but in the UI the dropdown is empty. Don't know why the Select's are not being populated. Any ideas?

Code supplied below, it is for the Object.entries() part.................and some more text to bypass stack overflows text length rulesss.

LANGKEY

function languagesKey(){
return {
    "ar": "Arabic",
    "af": "Afrikaans",
    "eu": "Euskal", // Basque,
    "bg": "български", // "Bulgarian",
    "ca": "Català", // "Catalan",
    "cmn": "Mandarin",
    "yue": "Cantonese",
    "hr": "Hrvatski", // "Croatian",
    "cs": "Ceština", // "Czech",
    "da": "Dansk", // "Danish",
    "en": "English",
    "fa": "Farsi",
    "fr": "French",
    "fil": "Filipino",
    "fi": "Suomalainen", // "Finnish",
    "gl": "Galaco", // "Galacian",
    "de": "Deutsche", // "German",
    "el": "Ελληνικά", // "Greek",
    "he": "Hebrew",
    "hi": "हिंदी", // Hindi",
    "hu": "Magyar", // "Hungarian",
    "is": "Íslensku", // "Icelandic",
    "id": "Bbahasa Indonesia", // "Indonesian",
    "it": "Italiano", // "Italian",
    "ja": "日本人", // "Japanese",
    "ko": "한국어", // "Korean",
    "lt": "Lietuvių", // "Lithuanian",
    "ms": "Melayu", // "Malaysian",
    "nl": "Nederlands", // "Dutch",
    "nb": "Norsk", // "Norwegian",
    "pl": "Polskie", // "Polish",
    "pt": "Português", // "Porteguese",
    "ro": "Română", // "Romanian",
    "ru": "Pусский", // "Russian",
    "sr": "Српски", // "Serbian",
    "sk": "Slovenský", // "Slovakian",
    "sl": "Slovenija", // "Slovenian",
    "es": "Español", // "Spanish",
    "sv": "Svenska", // "Swedish",
    "th": "ไทย", // "Thai",
    "tr": "Türk", // "Turkish",
    "uk": "Українська", // "Ukrainian",
    "vi": "Tiếng Việt", // "Vietnamese",
    "zu": "Zulu" 
}
}

STATE

constructor(props){
super(props)

this.state = {
  description:        null,
  language:           '',
  listName:           null,
  listIdToDelete:     null,
  nativeLanguage:     '',
  openModal:          false, 
  words:              null
}

}

HTML

<FormControl>
                <InputLabel htmlFor="languageSelect">Select Language You Plan to Learn</InputLabel>
                <Select 
                  onChange={ this.languageChange }
                  inputProps={{
                    name: 'language',
                    id: 'languageSelect'
                  }}
                  value={ this.state.language }
                >
                  { Object.entries(languagesKey()).forEach(([key, value], index) => {
                      return (
                        <MenuItem key={ index } value={ key }>{ value }</MenuItem>
                      )
                    }) 
                  }
                </Select>
              </FormControl>
              <FormControl>
                <InputLabel htmlFor="nativeLanguageSelect">Select Language You Already Know</InputLabel>
                <Select 
                  onChange={ this.nativeLanguageChange }
                  inputProps={{
                    name: 'nativeLanguage',
                    id: 'nativeLanguageSelect'
                  }}
                  value={ this.state.nativeLanguage }
                >
                  { Object.entries(languagesKey()).forEach(([key, value], index) => {
                      return (
                        <MenuItem key={ index } value={ key }>{ value }</MenuItem>
                      )
                    }) 
                  }
                </Select>
  </FormControl>

Answer 1

let items = [];
        Object.entries(this.languagesKey()).forEach(([key, value], index) => {
            items.push(<MenuItem key={index} value={key}>{value}</MenuItem>);
        });


<FormControl>
                <InputLabel htmlFor="nativeLanguageSelect">Select Language You Already Know</InputLabel>
                <Select 
                  onChange={ this.nativeLanguageChange }
                  inputProps={{
                    name: 'nativeLanguage',
                    id: 'nativeLanguageSelect'
                  }}
                  value={ this.state.nativeLanguage }
                >
                  { items }
                </Select>
  </FormControl>

Recommend using .map for easier use

you need array to use map. example.

<FormControl>
                <InputLabel htmlFor="nativeLanguageSelect">Select Language You Already Know</InputLabel>
                <Select 
                  onChange={ this.nativeLanguageChange }
                  inputProps={{
                    name: 'nativeLanguage',
                    id: 'nativeLanguageSelect'
                  }}
                  value={ this.state.nativeLanguage }
                >
                  {Object.keys(this.languagesKey()).map(option =>
                                        <MenuItem key={option} value={option}>{this.languagesKey()[option]}</MenuItem>
                                    )}
                </Select>
  </FormControl>