-
Notifications
You must be signed in to change notification settings - Fork 2.3k
Open
Labels
Description
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.
blueprint/packages/core/src/components/overflow-list/overflowList.tsx
Lines 98 to 102 in 50d81e9
| /** | |
| * 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).
Reactions are currently unavailable