React Aria. Collection API. How to access the index of an element in an array?

[predaytor]

Sometimes it is necessary to have a dynamic index of the current element, for example to mark nested fields in complex form data, since it must start with 0, representing the actual array in the result.

<Collection items={items}>
	{variant => (
		<FieldGroup style={styles.fieldgroup}>
			<TextField name={`variants.${items.indexOf(variant)}.name`} type="text" isRequired defaultValue={variant.name} />
		</FieldGroup>
	)}
</Collection>

It would be nice if renderProp had idx as the second argument:

<Collection items={items}>
	{(variant, idx) => ()}
</Collection>

[snowystinger]

Unfortunately, if we provide/track the index, then we lose some of our ability to cache. Instead, it's best to keep an index map yourself

let items = [...]
let indexMap = new Map();
items.forEach((item, index) => indexMap.set(item, index)); // you can memo this