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

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.