TS React with MUI Dynamic Data Not Rendering Components

[thick kestrel]

I've got dynamic data in an array. Trying to output the details in a list. Nothing in loadTableData() is being rendered. I've tried raw HTML, using a .map() instead of a .forEach() and even a for loop. Nothing is loading.

Context:
database = json file
tableList = json file key, that is an array

What am I doing wrong?

  private loadTableData() {
    const keys = Object.keys(database.tableList[0]);
    keys.forEach((item) => {
      return (
        <ListItemButton key={item} sx={{ pl: 4 }}>
          <ListItemIcon>
            <DatasetIcon />
          </ListItemIcon>
          <ListItemText primary={item} />
        </ListItemButton>
      );
    });
  }

render() {
// some code
<List component='div' disablePadding>
    {() => this.loadTableData()}
</List>
// some code
}

[full vine]

#react-and-web

loadTableData isn't returning anything, so you're currently doing nothing

I also believe this is "poor react'ing", since a component should render what is given to it, and not really care what's up.

function TableItem({item}) {
  return (
        <ListItemButton key={item} sx={{ pl: 4 }}>
          <ListItemIcon>
            <DatasetIcon />
          </ListItemIcon>
          <ListItemText primary={item} />
        </ListItemButton>
  )
}

function TableList({tableList}) {
  return <List>
    {tableList.map(item => 
      <TableItem key={item.id} item={item} />
    )}
  </List>
}

[thick kestrel]

While I agree with this sentiment, I've been fighting this for a few days. Probably tested 10 different ways to achieve this.

But I appreciate the feedback. Just got this garbage working.

#solution
Directly in the render() I changed my forEach to a map again, and placed it directly it the component.

<List component='div' disablePadding>
  {database.tableList.map((item) => {
    return (
      <ListItemButton key={`${item.id}`} sx={{ pl: 4 }}>
        <ListItemIcon>
          <DatasetIcon />
        </ListItemIcon>
        <ListItemText primary={item.name} />
      </ListItemButton>
    );
  })}
</List>