Acessing each object in the array using map

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}
          />
        );
      });

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?

1 Like

thanks ,I perfectly understand now.