list should have a unique "key" prop

Question

I get this error even though I put a key. react_devtools_backend.js:4026 Warning: Each child in a list should have a unique "key" prop. Shows here a picture of the error

Showing the code here :

  return (
<div>
  <div style={{ textAlign: "center" }}>
    {players?.length > 0 && (
      <div style={{ marginTop: "2rem" }}>
          <h2>Results "{query}"</h2>
          <TableContainer
            component={Paper}
            style={{
              marginLeft: "auto",
              marginRight: "auto",
              width: "90%",
            }}
          >
            <Table sx={{ minWidth: 350 }} aria-label="simple table">
              <TableHead>
                <TableRow>
                  <TableCell>Full Name</TableCell>
                  <TableCell>Club</TableCell>
                  <TableCell>Nation</TableCell>
                  <TableCell>Position</TableCell>
                  <TableCell>Age</TableCell>
                  <TableCell>Market Value</TableCell>
                  <TableCell>Favorite</TableCell>
                </TableRow>
              </TableHead>
              <TableBody>
                {players.map((item) => {
                  return <TableRow
                  key={item.id}
                  sx={{
                    "&:last-child td, &:last-child th": { border: 0 },
                  }}
                  style={{ textAlign: "center" }}
                >
                  <TableCell>
                    <ListItem>
                      <Link
                        onClick={() => pickPlayer(item.id)}
                        style={{ textDecoration: "none" }}
                        to={`/player/${item.id}`}
                      >
                        {item?.img !== "https://img.a.XXX.technology/portrait/header/default.jpg?lm=1" &&
                        <img
                        src={item?.img}
                        alt={item?.displayName}
                        style={{ marginRight: "5px" , width: '2.5rem' , borderRadius: '80%' }}
                      />
                        }
                        {item?.img === "https://img.a.XXX.technology/portrait/header/default.jpg?lm=1" &&
                        <img
                        src={'https://www.seekpng.com/png/full/202-2024994_profile-icon-profile-logo-no-background.png'}
                        alt={item?.displayName}
                        style={{ marginRight: "5px" , width: '3rem'}}
                      />
                        }
                        <span style={{ verticalAlign: "1rem" }}>
                          {item?.displayName}
                        </span>
                      </Link>
                    </ListItem>
                  </TableCell>
                  <TableCell>
                    <ListItem>
                      <img
                        src={`https://tmssl.akamaized.net/images/wappen/head/${item?.imgId}.png?lm=1457423031`}
                        alt={item?.club}
                        title={item?.club}
                        style={{ marginRight: "2px" ,  width: '1.7rem' }}
                      />{" "}
                      {item?.club}
                    </ListItem>
                  </TableCell>
                  <TableCell>
                    {item?.nationality.map((item) => {
                      return (
                        <>
                          <ListItem key={uuidv4()}>
                            <img
                              key={uuidv4()}
                              src={item?.flag}
                              alt={item?.title}
                              title={item?.title}
                              style={{ marginRight: "5px" , width : '1.7rem' , borderRadius : '10rem' }}
                            />{" "}
                            {item.title}
                          </ListItem>
                        </>
                      );
                    })}
                  </TableCell>
                  <TableCell>
                    <ListItem>{item.position}</ListItem>
                  </TableCell>
                  <TableCell>
                    <ListItem>{item.age}</ListItem>
                  </TableCell>
                  <TableCell>
                    <ListItem>{item.tmValue}</ListItem>
                  </TableCell>
                  <TableCell>
                    <ListItem>
               
                 {
                  favoriteLoading ? "loading..." :
                  <>
                  {
                    favorite.find(fav => fav.playerId === item.id && fav.scoutId === auth._id) !== undefined ? <Favorite style={{ color: "red" }} /> : <FavoriteBorder style={{ color: "red" }} />
                  }
                  </>
                  }
                    </ListItem>
                  </TableCell>
                </TableRow>
                }
                )}
              </TableBody>
            </Table>
          </TableContainer>
          </div>
      )}
      {playersLoading && players?.length === 0 ? progress : players?.length === 0 && <h3>{query} Not Found</h3> }
      {playersLoading && players?.length > 0 && progress}
      {playersLoading && players?.length === 0 ? null : players.length <= 3 && <div style={{height : "20vh"}}>
      {
        !underThree && <h4>Scroll Down to load more</h4>
      }
      </div>}
  </div>
</div>
);

what can we do ? I have tried until now to maybe even use an external dynamic uuid to check if the Id is repeating itself and this is not the case. Because everything seems fine to me.

Answer 1

The problem is in this code:

{item?.nationality.map((item) => {
  return (
    <>
      <ListItem key={uuidv4()}>
        <img
          key={uuidv4()}
          src={item?.flag}
          alt={item?.title}
          title={item?.title}
          style={{ marginRight: "5px" , width : '1.7rem' , borderRadius : '10rem' }}
        />{" "}
        {item.title}
      </ListItem>
    </>
  );
})}

The key must be on the outermost element. Your outermost element is a fragment <>, which has no key. If you don't need the fragment you can delete it and have the ListItem be the outermost element.

If you do need to have a fragment on the outside, you can use the longhand form of fragments to add a key to it:

import { Fragment } from 'react';
// ...
return (
  <Fragment key={/* insert key here */}> 
    <ListItem>
      <img
        src={item?.flag}
        alt={item?.title}
        title={item?.title}
        style={{ marginRight: "5px" , width : '1.7rem' , borderRadius : '10rem' }}
      />{" "}
      {item.title}
    </ListItem>
  </Fragment>
)

By the way, calling uuidv4() as you're doing for the key is going to create a brand new key on every render. This is going to force every list item to unmount and remount on every render. The keys should ideally be a piece of data on the item. If that's not an option, then the index could be used as a last resort. But don't use random keys that change on every render.

Answer 2

Check your file where you have defined item if there is any repeated number or anything in your item.id.

Or you can also give it Math.random(); like:

{players.map((item) => {
    return <TableRow
        key={Math.floor(Math.random)}
        ...
    </TableRow>
}