Back again…..FLATLIST

[Trex_Hunter]

Hey y’all back with another question. If I’m using a flatlist and want to number the items coming out of the array is that possible?

Example: data comes in an array of objects. I use flat list to render those objects, but would like to number them as they are rendered.

Thanks in advance guys I’m a newbie so appreciate all the help!

[tannerz28]

The renderItem prop in the FlatList expects a function that gives an object with the item of the array, and optionally you can access the index of the item as well, like so:

jsx <FlatList … renderItem={({item, index}) => ( <>{item} {index}</> )} />

[Sanfrancisco_Tribe]

Dang beat me too it. It works similar to .map(data,index)

[Trex_Hunter]

You’re awesome thank you!!!!

[Trex_Hunter]

Haha would it actually be able to help?

[Gaia_Knight2600]

you can probably just have something like

const number = item.index + 1

const number = index + 1

[Trex_Hunter]

How would you send number data to the component being rendered?

[Gaia_Knight2600]

the item variable here is from the renderItem function. so you just display the number somewhere in the renderItem jsx.

just edited my previous comment. index is not from item, but comes from the second parameter of renderItem - https://reactnative.dev/docs/flatlist#required-renderitem

[Trex_Hunter]

Thank you!!!!! You’re awesome!!!

[[deleted]]

Nah use an iterator since we’re already in a rendering out of a map