adobe / adobe/react-spectrum

Can't access item index in the ListBox callback function

Open
#5,780 9 comments 0 reactions 0 assignees View on GitHub
Dominant language
TypeScript
Stars
15.9k
Forks
1.6k
Avg merge
3d 9m
Merged PRs (30d)
59

Description

### 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_

Contributor guide

Open the contributing guide

Assessment

This issue has not been assessed yet.

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.