React Distribute Chips Table Cells with rows 5 cells wide - reactjs

Question

I want to create a table in my React functional component using hooks and the react material ui. I have an array of strings and I want to create a chip for each string in a table cell like so:
<TableCell>
<Chip
key={index}
className={classes.chips}
size="large"
label={user}
icon={<AccountCircleIcon className={classes.closeIcon}/>}
/>
</TableCell>
I display an array of chips with
<div className={classes.chipContainer}> {Object.values(selectedUsersToDelete).map((user, index) => {
return (
<TableRow>
<TableCell>
<Chip
key={index}
className={classes.chips}
size="large"
label={user}
icon={<AccountCircleIcon className={classes.closeIcon}/>}
/>
</TableCell><TableCell>
<Chip
key={index}
className={classes.chips}
size="large"
label={user}
icon={<AccountCircleIcon className={classes.closeIcon}/>}
/>
</TableCell>
</TableRow>
)
})}
</div>
where selectedUsersToDelete is the value of useState.
I have tried every way of looping over the values in selectedUsersToDelete, but I cannot get react to render the table with the table rows 5 cells wide!
Also adding a deleteIcon and deletehandler to the Chip breaks them.
I'm trying to adapt this tutorial to use hooks: tut

Answer 1

import React, { useState, useEffect } from 'react';
// You'll need to add correct paths below
import AccountCircleIcon from './AccountCircleIcon';
import TableCell from './TableCell';
import TableRow from './TableRow';
import Chip from './Chip';
const ChipContainer = props => {
// State is initialized here
const [selectedUsersToDelete, setSelectedUsersToDelete] = useState([]);
// Props destructred
const { classes } = props;
// Just an example showing how you can set state once componnent has mounted
useEffect(
() =>
void setSelectedUsersToDelete([
'user1',
'user2',
'user3',
'user4',
'user5'
]),
[]
);
return (
<div className={classes.chipContainer}>
<TableRow>
{selectedUsersToDelete.map((user, index) => (
<TableCell>
<Chip
key={index}
className={classes.chips}
size="large"
label={user}
icon={<AccountCircleIcon className={classes.closeIcon} />}
/>
</TableCell>
))}
</TableRow>
</div>
);
};
export default ChipContainer;