Warning: Each child in a list should have a unique "key" prop in React.js , data is not shown in table but it showing in console

Question

I want to showing the All Users List in Table using Table Row and Table body , but data is showing in console but not showing in table.

<TableBody>
    {
      users.map(user => (
        <TableRow>
          <TableCell>{users._id}</TableCell>
          <TableCell>{users.name}</TableCell>
          <TableCell>{users.username}</TableCell>
          <TableCell>{users.email}</TableCell>
          <TableCell>{users.phone}</TableCell>
          </TableRow>
          ))
         }
</TableBody>

Answer 1

React uses the key prop to create a relationship between the component and the DOM element that why it need a unique prop key for each child in list so what you should do is

<TableBody>
    {
      users.map(user => (
        <TableRow key={user._id}>
          <TableCell>{users._id}</TableCell>
          <TableCell>{users.name}</TableCell>
          <TableCell>{users.username}</TableCell>
          <TableCell>{users.email}</TableCell>
          <TableCell>{users.phone}</TableCell>
          </TableRow>
          ))
         }
</TableBody>