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!
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...'
}