Skip to content

[Docs] OverflowList: Document key prop requirement for visibleItemRenderer #7746

@ggdouglas

Description

@ggdouglas

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).

Metadata

Metadata

Assignees

No one assigned

    Type

    No type

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions