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 ?