How to map an Array of objects, that have arrays in the objects

Question

My question is a bit hard to explain in the title.. but in react, I'm trying to map an element that looks like this

[
  { 
    logicLayer: { name: someName, etc }, 
    subComps: [ { name: anotherName, etc },{ name: anotherName, etc } ]
  },
  { 
    logicLayer: { name: someName, etc }, 
    subComps: [ { name: anotherName, etc },{ name: anotherName, etc } ]
  },
  etc
]

To a dropdown button menu

// This Works Fine

return (
        singular.buttonGroups.map(( buttonGroup, index1 ) =>
          buttonGroup.subComps.map(( subComp, index2 ) =>
            <MenuItem key={index2}><b>{buttonGroup.logicLayer.name}:</b> {subComp.name}</MenuItem>
          )
        )
      );

But what I really want to do is put a "divider" after it iterates the inner array.. something like this

// This Doesn't Work

return (
        singular.buttonGroups.map(( buttonGroup, index1 ) =>
          buttonGroup.subComps.map(( subComp, index2 ) =>
            <MenuItem key={index2}><b>{buttonGroup.logicLayer.name}:</b> {subComp.name}</MenuItem>
          )
            <MenuItem divider></MenuItem>  // THIS LINE DOESN'T WORK
        )
      );

How can I map this properly so that I can put a divider after it iterates the array of one of its objects?

EDIT: would be nice if there is a solution out there that doesn't require me to wrap it in a div container

Dekel · Accepted Answer · 2017-08-09 22:52:20Z

1

You need to wrap it with some container:

return (
    singular.buttonGroups.map(( buttonGroup, index1 ) =>
      <div> 
          {buttonGroup.subComps.map(
             ( subComp, index2 ) =>
                <MenuItem key={index2}><b>{buttonGroup.logicLayer.name}:</b> {subComp.name}</MenuItem>
          )}
          <MenuItem divider></MenuItem>  // THIS LINE DOESN'T WORK
      </div>
    )
  );

answered Aug 9, 2017 at 22:52

Dekel

62.9k12 gold badges109 silver badges130 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

user1189352 Over a year ago

it worked thank you! the div does seem to mess up the CSS.. but at least I understand why my original code didn't work.. ty again

Dekel Over a year ago

You are welcome :) You can change the div to any other element (or use css to fix the styling).

Collectives™ on Stack Overflow

How to map an Array of objects, that have arrays in the objects

1 Answer 1

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related