Loop through array and create a ListItem for each item

Question

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>

laker93 · Accepted Answer · 2024-05-23 12:48:13Z

3

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>
    );
})}

edited May 23, 2024 at 12:48

laker93

8628 silver badges11 bronze badges

answered Jun 18, 2020 at 16:50

subashMahapatra

6,8872 gold badges23 silver badges27 bronze badges

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

Collectives™ on Stack Overflow

Loop through array and create a ListItem for each item

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related