L oop через массив и создать ListItem для каждого элемента

Question

Я пытаюсь l oop через массив, переданный в именованные инструменты, и создать ListItem для каждого элемента в списке на основе его свойств. В настоящее время все, что у меня отображается, - это мой ListSubheader. Кнопки не отображаются. Я хотел бы подтвердить, что моя проблема здесь, а не в том, что передается по наследству.

инструменты выглядят так:

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

Мой код выглядит следующим образом:

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

ОБНОВЛЕНИЕ: для всех, кто может наткнуться на этот ответ, не связанный с вопросом , вы все равно получите сообщение об ошибке. Вместо:

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

используйте

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

Answer 1

Вы должны использовать Array.prototype.map, а не Array.prototype.forEach.

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