'Where am I missing a key prop here? I'm generating uuids for TableCell keys and I'm using row.id for the row keys
I have this bit of code where I'm getting the warning:
Each child in a list should have a unique "key" prop. Check the render method of
AllPersonnel... at TableRow
And the table cells are not rendering. Any help would be appreciated. Thanks!
<TableContainer component={Paper}>
<Table>
<TableHead>
<TableRow key={uuidv4()}>
{cols.map((col) => {
return <TableCell key={col.path}>{col.name}</TableCell>
})}
</TableRow>
</TableHead>
<TableBody>
{personnel.map((row, i) => {
return (
<TableRow key={row.id}>
<TableCell key={uuidv4()}>{row.first_name}</TableCell>
<TableCell key={uuidv4()}>{row.last_name}</TableCell>
<TableCell key={uuidv4()}>{row.section}</TableCell>
<TableCell key={uuidv4()}>{row.role}</TableCell>
<TableCell key={uuidv4()}>{row.employee_type}</TableCell>
</TableRow>
);
})}
</TableBody>
</Table>
</TableContainer>
Sources
This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.
Source: Stack Overflow
| Solution | Source |
|---|
