React - How to iterate over dictionary in render method using JSX? - ecmascript-6

Question

I'm learning React and have set up a small test app that makes an Ajax call that returns a JSON object that I want to iterate over in the return method of my component. I've tried everything I can think of and have googled this, but like an hour later I'm still stumped.
Here is what I have...
render() {
const { vals } = this.state;
return (
<div>
{/* note that this correctly outputs the value of vals[key]: {vals['key']} */}
Object.keys({vals}).map((key, index) => (
<p key={index}> this is my key {key} and this is my value {vals[{key}]} </p>
))
</div>
)
}
What am I doing wrong here? Any recommendations on a good reference for ES6/JSX? I've been struggling with simple things, with no good way to look up this info.

Answer 1

{vals} extracts out the vals property from an object. Hence Object.keys({vals}) is incorrect as vals is already an object. Likewise, it should be {vals[key]} instead of {vals[{key}]}.
render(){
const {vals} = this.state; // Essentially does: const vals = this.state.vals;
return (
<div>
{
Object.keys(vals).map((key, index) => (
<p key={index}> this is my key {key} and this is my value {vals[key]}</p>
))
}
</div>
)
}
If vals is an object containing { a: 1, b: 2}, Object.keys(vals) will get you ['a', 'b'] and in the first iteration of the map, key will be 'a' and to access the value, do vals[key] which is essentially vals['a'] => 1.
I think you are confused by the Object destructuring syntax. It's really quite simple as it's just syntactic sugar over ES5 JavaScript (most ES6 is just sugar). Have a read at MDN's docs on Destructuring assignment to understand it better.