How to iterate over nested objects and render inside jsx?

Question

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

I need to make javascript equivalent 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 NOT THESE WORKS?

groupItem.map - DOES NOT WORK

Object.keys (groupItem) .forEach (function (key) {- DOES NOT WORK

Answer 1

You were almost right with your implementation of Object.keys (map is a property only for arrays), but the syntax error comes from wrapping {} . You do not need to run, you are already inside the js syntax.

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

Answer 2

I decided to create my own method because of the awkwardness 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 ( 

It is much easier to read.