How can I render a nested map inside my jsx component?

I need to do the equivalent of a javascript for(key in groupItem){} See below.

class MyComponent extends React.Component {
    render () {    
        var options = this.props.options;
        return (            
            <div>
                {options.map(function(groupItem, key){ return (
                    /* 
                      Unexpected Token if using groupItem.map?
                      {groupItem.map(function(){return })}

                   */
                )})}
            </div>
        )
    }
}
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'
     }
}

WHY DON'T THESE WORK?

groupItem.map - DOESN'T WORK

Object.keys(groupItem).forEach(function (key){ - DOESN'T WORK

How can I render a nested map inside my jsx component?

I need to do the equivalent of a javascript for(key in groupItem){} See below.

class MyComponent extends React.Component {
    render () {    
        var options = this.props.options;
        return (            
            <div>
                {options.map(function(groupItem, key){ return (
                    /* 
                      Unexpected Token if using groupItem.map?
                      {groupItem.map(function(){return })}

                   */
                )})}
            </div>
        )
    }
}
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'
     }
}

WHY DON'T THESE WORK?

groupItem.map - DOESN'T WORK

Object.keys(groupItem).forEach(function (key){ - DOESN'T WORK

• javascript
• reactjs
• ecmascript-6
• jsx

• It's Object.keys + map, not forEach. forEach is meant to simply iterate. map retains returned values and creates a new array. – Gosha A Commented Jun 27, 2016 at 15:13

2 Answers 2

You were almost right with your Object.keys implementation, (map is a property for arrays only), but the syntax error is coming from the wrapping {}. You don't need to escape, you're already inside js syntax.

return (            
    <div>
        {options.map(function(groupItem, key){ return (
            Object.keys(groupItem).map(function(item){return (
                <YourComponent group={groupItem} item={item} />
            );})
        );})}
    </div>
);

I've decided to create my own method, due to the clunkyness of this.

function each(obj, callback){
    return (Array.isArray(obj))? forArray(obj, callback):forObject(obj, callback);
}
function forArray(obj, callback){
    return obj.map(callback);
}
function forObject(obj, callback){
    return Object.keys(obj).map(callback);
}


class MyComponent extends React.Component {
    render () {    
        var options = this.props.options;
        return (            
            <div>                    
                {each(options, function(groupItem){ return (                        
                     each(groupItem, function(key){return ( 

This is much easier to read.