title: How to iterate nested objects and render inside jsx?
body: <p><strong>How can I render a nested map inside my jsx component?</strong></p>
  
  <p>I need to do the equivalent of a javascript for(key in groupItem){}
  See below. </p>
  
  <pre><code>class MyComponent extends React.Component {
      render () {    
          var options = this.props.options;
          return (            
              &lt;div&gt;
                  {options.map(function(groupItem, key){ return (
                      /* 
                        Unexpected Token if using groupItem.map?
                        {groupItem.map(function(){return })}
  
                     */
                  )})}
              &lt;/div&gt;
          )
      }
  }
  Dropdown.defaultProps = {
     options:[{ 
        'groupX':{
            'apple':'lovely green apple',
            'orange':'juicy orange',
            'banana':'fat banana'
        }
     }]
  }
  
  JSON.stringify(groupItems) === {
      'groupX':{
          'apple':'lovely green apple',
          'orange':'juicy orange',
          'banana':'fat banana'
       }
  }
  </code></pre>
  
  <p>WHY DON'T THESE WORK?</p>
  
  <p>groupItem.map 
  - DOESN'T WORK</p>
  
  <p>Object.keys(groupItem).forEach(function (key){
  - DOESN'T WORK</p>