Can't access item index in the ListBox callback function

[drewpoling2]

Provide a general summary of the feature here

I've made a custom ListBox component using the hooks React Aria offers (useListState, useListBox). When I use my ListBox component, I would like to be able to access the index in the callback function for each item. Similar to a map in javascript, however when I try to access index it returns undefined.

🤔 Expected Behavior?

{(listItem, index) => ( {listItem.name} )}

I expected similar behavior to a .map function in javascript where I could access the index on each item.

😯 Current Behavior

The index returns undefined when I try to access it.

💁 Possible Solution

No response

🔦 Context

I am trying to accomplish conditional styling for the last item in the listItem array set. So for every other item I will have a border on the bottom but the last item will have no border on the bottom. So I need to access the index in order to know if the item is the last node.

💻 Examples

No response

🧢 Your Company/Team

PSU

🕷 Tracking Issue

No response

[reidbarber]

You can do state.collection.getLastKey() to get the last key, and compare it to the current key. See the Collection interface for more methods like this.

[snowystinger]

You could also use https://developer.mozilla.org/en-US/docs/Web/CSS/:last-child ?

[bigfoot31]

The original question is still not answered.

• Having access to the index of the currentItem is very helpful in complicated rendering logic, not just css.
• Also, having access to the index is the norm for javascript coding. People are just used to it.

Unless there exists a massive performance improvement the index should be provided. Not everyone is going to use React-Stately.

 <ListBox
      aria-label="pins"
      selectionMode="multiple"
      items={pinIds.map((p) => ({ value: p }))}
    >
  {({ value }) => (
    <ListBoxItem className="outline-none rounded-md hover:bg-neutral-200" id={value}>
      <span>{value}<span/>
    </ListBoxItem>
  )}
</ListBox>

[snowystinger]

Can you provide a use case (I am not seeing anything in that code example about the index)? that will help us evaluate the right thing to potentially expose.
Linking a similar discussion in case this solves your use case or sheds light on why we don't just expose the index already #2138

[CanRau]

Want the same for <GridList/> to render the index to the user for clarity in our subscription tier editor.

Update: Using css counters in this case for now 🤓