CODEWITHSUNDEEP
arraysreactjstypescriptreact-native
Mahmoud Ali
Mahmoud Ali

Reputation: 156

How to know which iteration of the array.map I'm on?

I'm new to react-native. I want to use array.map() to render out some jsx in the UI. I'm looping over the API response which is as follows:

chosenProducts = [
{id:1 , name:"carpet"} ,
{id:24 , name:"toy"} ,
{id:28 , name:"laser"} ,
{id:137 , name:"map"} ,
]

I use chosenProducts.map((prod)=>{some jsx}) to map over the array. but I want to add a key-value pair ex: order:1 to each product to be able to order them in the UI.

How can I dynamically add the order to them without changing the API response?

note: I'm using TypeScript

ps: I will use the order attribute to dynamically style the products. so it's not just the ordering!

Upvotes: 2

Views: 638

Answers (1)

jsonderulo
jsonderulo

Reputation: 1492

The second parameter in the map function destructuring is the index of the item in the array

chosenProducts.map((prod, id)=>{some jsx }) // add id here

https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/map

Upvotes: 3

Related Questions