React Native - How to pass index in map function

Question

I have a map function to create a component repetitively and dynamically. Suppose it's like this:

renderBoxes() {
    return Array.map(data => this.myFunction(indexOfThisArray));
} 

How can I pass the index of the array? So that the 'myFunction' function gets the index value everytime it is called.

Solution 1

Map provides second argument as the index of the current element and third argument as the whole array itself.

renderBoxes() {
    return Array.map((data, index, array) => this.myFunction(index));
} 

Read more about Array.prototype.map

Solution 2

the syntax of map is

var new_array = arr.map(function callback(currentValue, index, array) {
    // Return element for new_array
}[, thisArg])

source. You can find the index as the 2nd parameter in the callback function

Solution 3

Simply pass a second arguments to your arrow function (data, index)

renderBoxes() {
    return Array.map((data, index) => this.myFunction(indexOfThisArray));
} 

Signaure for .map

var new_array = arr.map(function callback(currentValue, index, array) {
    // Return element for new_array
}[, thisArg])