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.

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.

• javascript
• arrays
• reactjs
• react-native
• react-router

• 1 at least you saved my some time lol – Bikram Thapa Commented Feb 18, 2019 at 6:22

3 Answers 3

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

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

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])