Acessing each object in the array using map

[aynuman19]

please if any one who understand how each object is accessed in the array using map let me know ?for what is drumObj used in the map method?

const bank = [
  {
    keyCode: 81,
    keyTrigger: 'Q',
    id: 'Heater-1',
    url: 'https://s3.amazonaws.com/freecodecamp/drums/Heater-1.mp3'
  },
  {
    keyCode: 87,
    keyTrigger: 'W',
    id: 'Heater-2',
    url: 'https://s3.amazonaws.com/freecodecamp/drums/Heater-2.mp3'
  },
  {
    keyCode: 69,
    keyTrigger: 'E',
    id: 'Heater-3',
    url: 'https://s3.amazonaws.com/freecodecamp/drums/Heater-3.mp3'
  },
  {
    keyCode: 67,
    keyTrigger: 'C',
    id: 'Closed-HH',
    url: 'https://s3.amazonaws.com/freecodecamp/drums/Cev_H2.mp3'
  }
];

bank.map((drumObj,i, padBankArr) => {
        return (
          <DrumPad
            clip={padBankArr[i].url}
            clipId={padBankArr[i].id}
            keyCode={padBankArr[i].keyCode}
            keyTrigger={padBankArr[i].keyTrigger}
 updateDisplay={this.displayClipName}
          />
        );
      });

[kevinSmith]

I’m not sure I understand your question.

The purpose of map is to create a new array where each element in the new array is based on the corresponding element in the old array.

So, if I write,

bank.map((drumObj,i, padBankArr) => {
  return (
  
  );
});

it will iterate through that 4 times, one for each element in the array. The first iteration will have:

{
keyCode: 81,
keyTrigger: ‘Q’,
id: ‘Heater-1’,
url: ‘https://s3.amazonaws.com/freecodecamp/drums/Heater-1.mp3’
}

Whatever I return from that will be the first element in the new array. for example, if I wanted only the key code and key trigger, I could do:

bank.map((drumObj) => {
  return {
    keyCode: drumObj.keyCode,
    keyTrigger: drumObj.keyTrigger,
  };
});

It would do that for all 4 elements and that would be the new array that map returns.

The i (index) and padBankArr (reference to the original array) are option. I occasionally use the index - I almost never use the reference to the original array.

---

I notice that you have

return (

);

Are you using this with JSX?

---

We can help a lot better if we understand what you are trying to do. We can see what the original data looks like - what are you trying to do with it? What do you need it to be when it is done?

[aynuman19]

thanks ,I perfectly understand now.