title: How do I iterate through key pair collection?
body: <p>I have defined some sample data (collection) and trying to iterate through but getting <code>Failed to Compile</code> and it's pointing to <code>render() {</code> in this component:</p>
  
  <pre><code>class RecipeList extends Component {
    constructor(props) {
      super(props);
      this.state = {
        recipes: {
            "1": {
              id: 1,
              url: 'http://via.placeholder.com/300x300',
              title: '1st Title',
              description: 'some decription 1'
            },
            "1": {
              id: 2,
              url: 'http://via.placeholder.com/300x300',
              title: '1st Title',
              description: 'some decription 1'
            },
            "1": {
              id: 3,
              url: 'http://via.placeholder.com/300x300',
              title: '1st Title',
              description: 'some decription 1'
            }
      }
    }
  
    render() {
      const recipeIds = Object.keys(this.state.recipes);
  
      const Items = recipeIds.map((recipe) =&gt; {
        return (
          &lt;RecipeListItem
            key={recipe}
            recipe={recipe}
          /&gt;
        );
      });
  
      return (
        &lt;div&gt;
          {Items}
        &lt;/div&gt;
  
      );
    }
  }
  </code></pre>