I'm starting react and can't solve my problem. I have an object
modes= {
"easyMode": {
"field": 5
},
"normalMode": {
"field": 10
},
"hardMode": {
"field": 15
}
}
And I need to map this modes(easyMode, normalMode and hardMode), but I know that I can't map an object, only arrays. Right, but this also doesn't work
const arrayOfObjects = [{ modes }];
return (
<ul> {arrayOfObjects.map(mode=> <li key={mode}>{mode} </li>)}</ul>)
How I need to do this right?
CodePudding user response:
You can use Object.keys() to get an array with modes keys
const modes = {
easyMode: {
field: 5,
},
normalMode: {
field: 10,
},
hardMode: {
field: 15,
},
};
const modesKeys = Object.keys(modes); // ['easyMode','normalMode','hardMode' ]
return (
<ul> {modesKeys.map(mode => <li key={mode}>{mode}</li>)}</ul>
)
CodePudding user response:
I think it's a duplicate question and you can find a complete answer in this question here
but as a fast answer, for the objects, you have to iterate like this:
Object.keys(modes).map ( mode => {
console.log(mode,modes[mode]) // you can access the values like this
})