fix(chart): add index fallback for chart legend key #6361
Conversation
sanghyoLe
commented
Jan 15, 2025
sanghyoLe
commented
- Add index as fallback when item.value is undefined in radial charts
- Fixes [bug]: Chart Legend Each child in a list should have a unique "key" prop. #6243
- Add index as fallback when item.value is undefined in radial charts - Fixes shadcn-ui#6243
|
@sanghyoLe is attempting to deploy a commit to the shadcn-pro Team on Vercel. A member of the Team first needs to authorize it. |
| const key = `${nameKey || item.dataKey || "value"}` | ||
| const itemConfig = getPayloadConfigFromPayload(config, item, key) | ||
|
|
||
| return ( | ||
| <div | ||
| key={item.value} | ||
| key={item.value || index} |
There was a problem hiding this comment.
Using the index as a key can lead to re-render issues and state loss (as stated by the React docs here).
Instead, consider combining the index with another unique identifier:
key={`${index}-${Math.random().toString(36).substr(2, 9)}`}Or preferably, use item.dataKey as in lin 289.
There was a problem hiding this comment.
Some chart items don't have dataKey available, so we can't use it as a unique identifier.
I'll check if there are other consistent unique identifiers we could use instead and update accordingly.
There was a problem hiding this comment.
I found that for some chart types like RadialChart, the value is passed through item.payload.value instead of item.value. I've updated the code to use both item.value || item.payload?.value as the key to handle these cases, providing a more reliable unique identifier than the index.
- Some chart types (like RadialChart) store their value in item.payload.value instead of item.value
