Warning: Each child in a list should have a unique "key" prop in React.js , data is not sh-CodePudding

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>

CodePudding user response：

Change your code to:

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

CodePudding user response：

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>