list should have a unique "key" prop - reactjs

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>
}