I'm facing a challenge with generating unique key ID's for my list items. Even though I thought I had a good understanding of how unique keys function, it seems that I am mistaken.
In the code snippet below, using key={index} or key={item} is not sufficient. I keep encountering duplicate errors in my console, or sometimes the children within my list don't have keys at all.
The component below is causing issues. I'm puzzled as to why I'm seeing the warning message:
Encountered two children with the same key,In my particular scenario, I cannot utilize item.id as a key since that data is not available to me. I attempted using something like item.symbol (I'm dealing with stock market data), but this also led to duplicate key errors.
How can I resolve this issue?
export const MarketMovement = (props) =>
{
const { financialData } = props;
const priceAvgChangeASC = financialData[2] && sortAll(financialData[2], 'asc', 'price_avg_change')
.filter((i) => i.price_avg_change < 0)
.slice(0, 4)
.map((stock, index) => (
<Grid>
<ListItem key={index}>
<ListItemAvatar>
<Avatar style={{background:GradientRankGreen[index]}}>
{index + 1}
</Avatar>
</ListItemAvatar>
<ListItemText
primary={stock.symbol}
secondary={financialData && financialData[5].filter((i) => i.symbol === stock.symbol).map(
filteredSymbol => (
<>
{filteredSymbol.company}
</>
))}
/>
</ListItem>
</Grid>
));
// The rest of the code follows a similar structure
return (
<>
<Container style={{ padding: "10px", paddingBottom:"40px" }} maxWidth="md">
<Typography style={{paddingTop:"50px", paddingTop:"50px" }}variant="h2">Market Movers</Typography>
<Typography variant="overline">Stocks outpacing or declining in historical AVG's for price & volume</Typography>
<!-- Render remaining grid content here -->
</Container>
</>
)
}
EDIT:
The solution provided seems to address the problem except for one case in my code:
Even after adding the key attribute inside the <Grid> component, I'm still encountering an error.
export const MarketSentiment = (props) =>
{
const { financialData } = props;
const ratingScaleASC = financialData && financialData[4] && sortAll(financialData[4], 'asc', 'rating_scale')
.filter((i) => i.rating_scale < 2.5 )
.slice(0, 4)
.map((stock, index) => (
<Grid key={index}>
<ListItem>
<ListItemAvatar>
<Avatar style={{ backgroundColor: GreenRank[index]}}>
{index + 1}
</Avatar>
</ListItemAvatar>
<ListItemText
primary={stock.symbol}
secondary={financialData && financialData[5].filter((i) => i.symbol === stock.symbol).map(
filteredSymbol => (
<>
{filteredSymbol.company}
</>
))}/>
</ListItem>
</Grid>
));
// The rest of the code structure remains consistent
return (
<>
<Container style={{ padding: "10px", paddingBottom:"40px" }} maxWidth="md">
<Typography variant="h2">Market Sentiment</Typography>
<Typography variant="overline">an overview of sentiments based off stocks in your bucket. Investor sentiment are based off the number of put to calls. </Typography>
<!-- Render remaining grid content here -->
</Container>
</>
)
}
Error:
Each child in a list should have a unique "key" prop.
Check the render method of `ForwardRef(ListItemText)`. It was passed a child from MarketSentiment.