Using Map to Create Elements in React

1

I am trying to use the Map function to take specific values of an array (soundBank) and map them onto elements to be rendered on the page. (Project here, at the PadBank class, copied below. It appears the map function is not working because my React DevTools says “cannot read property ‘id’ of undefined.” (soundBank[i].id is the first reference trying to use the map function.)

Key code here:

class PadBank extends React.Component {
  constructor(props) {
    super(props);
  }
  render() {
 let padBank = soundBank.map((i) => {
       return (
          <DrumPad 
						clipId={soundBank[i].id} 
						clip="#"
						keyTrigger={soundBankr[i].keyTrigger}
						keyCode={soundBankr[i].keyCode} 
						 />
        )
      });
   return (
      <div className="pad-bank" >
				{padBank}
			</div>
  )
 }
};

Can anyone tell me how I am misusing the map function?

Thanks!

2

The first argument pass into the map callback is each of the objects in the soundBank array, it is not an index.

let padBank = soundBank.map((bank) => {
  return (
    <DrumPad
      clipId={bank.id}
      clip="#"
      keyTrigger={bank.keyTrigger}
      keyCode={bank.keyCode}
    />
  );
});

MDN: Array.prototype.map()

1 Like