CODEWITHSUNDEEP
arraysreactjsmaterial-ui
mspahr
mspahr

Reputation: 153

Loop through array and create a ListItem for each item

I am trying to loop through the array passed in named tools and create a ListItem for each item in the list based on its properties. Currently all I have being displayed is my ListSubheader. No Buttons display. I would like to confirm that my problem is here rather than what is being passed down.

tools looks like:

[
   {
      icon: PropTypes.object.isRequired,
      text: PropTypes.string.isRequired,
      route: PropTypes.string.isRequired 
   }, ...
]

My code is as follows: 

const ToolSidebar = ({ sidebarTitle, tools }) => {
  return (
    <Fragment>
      <List subheader={<ListSubheader>{sidebarTitle}</ListSubheader>}>
        {tools.forEach(tool => {
          return (
            <ListItem button href={tool.route}>
              <ListItemIcon>{tool.icon}</ListItemIcon>
              <ListItemText primary={tool.text} />
            </ListItem>
          );
        })}
      </List>
    </Fragment>
  );
};

UPDATE: For anyone who may stumble on this answer, while unrelated to the question, you will still get an error. Instead of: 

<ListItemIcon>{tool.icon}</ListItemIcon>

use 

<ListItemIcon> <SvgIcon component={tool.icon} /> </ListItemIcon>

Upvotes: 0

Views: 2914

Answers (1)

subashMahapatra
subashMahapatra

Reputation: 6837

Use Array.prototype.map instead of Array.prototype.forEach.

{tools.map(tool => {
     return (
        <ListItem button href={tool.route}>
           <ListItemIcon>{tool.icon}</ListItemIcon>
           <ListItemText primary={tool.text} />
        </ListItem>
    );
})}

Upvotes: 3

Related Questions