Where am I missing a key prop here? I'm generating uuids for TableCell keys and I'm using-CodePudding

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>

CodePudding user response：

You don't need a key on your TableRow, only on the first child in the return of an iterator. Try :

{personnel.map((row, i) => {
    const key = uuidv4()
              return (
                <TableRow key={key}>
                  <TableCell>{row.first_name}</TableCell>
                ...

Normaly...