React generating UI from object - console.log works but nothing generated-CodePudding

I have code that generates my react UI, and it works with a list of languages to generate checkboxes for language selection. For example when in state

languages = {English: true, French: false}

however when i change it to an object which contains the values from the DB, I get no error, but nothing loads.

[
{
    "language_name": "English",
    "lang_num": 1,
    "checked": false
},
{
    "language_name": "Mandarin Chinese",
    "lang_num": 2,
    "checked": false
},
]

The code is:

       {   
        Object.entries(this.props.languages).forEach(([key, value]) => {
          console.log(this.props.languages[key].language_name),
          <label id="checkbox-margin">
            <input
              type="checkbox"
              value={this.props.languages[key].language_name}  
              checked={this.props.languages[key].checked}
              onChange={this.handleLangClick}
            /> {this.props.languages[key].language_name}
          </label>
      }
      )

The console.log lists each language string fine, i get them all printed in the console, but nothing is generated on the UI. Any idea why?

Thanks!

CodePudding user response：

Try to use the map function to iterate through the array:

{this.props.languages ? this.props.languages.map(language => {
    return (
        <label id="checkbox-margin" key={language.lang_num}>
            <input
                type="checkbox"
                value={language.language_name}  
                checked={language.checked}
                onChange={this.handleLangClick}
            /> {language.language_name}
        </label>
    )}) : 'Loading languages...'
}