Summary
Package version: v6.6.0
The visibleItemRenderer prop on OverflowList requires users to provide a key prop on the returned element, but this requirement is only documented in this JSDoc comment and not in the overall documentation. Users reading the docs may miss this detail and encounter React's "Each child in a list should have a unique 'key' prop" warning.
|
/** |
|
* Callback invoked to render each visible item. |
|
* Remember to set a `key` on the rendered element! |
|
*/ |
|
visibleItemRenderer: (item: T, index: number) => React.ReactNode; |
Suggested Fix
Update overflow-list.md to add a note about the key requirement. For example:
## Usage notes
The `visibleItemRenderer` callback is called inside a `.map()` internally, so you **must** return an element
with a unique `key` prop.
// ✅ Correct
visibleItemRenderer={(item) => <Tag key={item.id}>{item.name}</Tag>}
// ❌ Incorrect - will cause React warning
visibleItemRenderer={(item) => <Tag>{item.name}</Tag>}
Additional Context
This also applies to other Blueprint components that use render prop patterns with internal iteration, such as Breadcrumbs (which uses OverflowList internally).
Summary
Package version:
v6.6.0The
visibleItemRendererprop onOverflowListrequires users to provide a key prop on the returned element, but this requirement is only documented in this JSDoc comment and not in the overall documentation. Users reading the docs may miss this detail and encounter React's"Each child in a list should have a unique 'key' prop"warning.blueprint/packages/core/src/components/overflow-list/overflowList.tsx
Lines 98 to 102 in 50d81e9
Suggested Fix
Update overflow-list.md to add a note about the key requirement. For example:
Additional Context
This also applies to other Blueprint components that use render prop patterns with internal iteration, such as
Breadcrumbs(which usesOverflowListinternally).