Drum machine feedback on keydown

JavaScript
1

I haven’t beautified or even finished all the test, but i’m curious what more experienced developers on here think of how i handled the keydown, is it inefficient? Is there a better way? Why is it bad / good? Also, it doesn’t pass the 7th test but all the keys make sounds when I press them, thanks for your feedback.

const keys = [{
  name: 'Q',
  url: 'https://s3.amazonaws.com/freecodecamp/drums/Heater-4_1.mp3',
  description: 'Heater-4_1',
  },{
  name: 'W',
  url: 'https://s3.amazonaws.com/freecodecamp/drums/Heater-1.mp3',
  description: 'Heater-1',
  },{
    name: 'E',
  url: 'https://s3.amazonaws.com/freecodecamp/drums/Kick_n_Hat.mp3',
  description: 'Kick_n_Hat',
  },{
    name: 'A',
  url: 'https://s3.amazonaws.com/freecodecamp/drums/punchy_kick_1.mp3',
  description: 'Chord_1',
  },{
    name: 'S',
  url: 'https://s3.amazonaws.com/freecodecamp/drums/Chord_1.mp3',
  description: 'punchy_kick_1',
  },{
    name: 'D',
  url: 'https://s3.amazonaws.com/freecodecamp/drums/Brk_Snr.mp3',
  description: 'Brk_Snr',
  },{
    name: 'Z',
  url: 'https://s3.amazonaws.com/freecodecamp/drums/Dry_Ohh.mp3',
  description: 'Dry_Ohh',
  },{
    name: 'X',
  url: 'https://s3.amazonaws.com/freecodecamp/drums/Heater-3.mp3',
  description: 'Heater-3',
  },{
    name: 'C',
  url: 'https://s3.amazonaws.com/freecodecamp/drums/Dsc_Oh.mp3',
  description: 'Dsc_Oh',
  },
];

class App extends React.Component{
  constructor(props){
    super(props);
    
    this.state = {
      play:false,
    };
    this.keyPressed = this.keyPressed.bind(this);
    this.handleClick = this.handleClick.bind(this);
  }
  
  componentDidMount(){
    document.addEventListener('keydown', this.keyPressed);
  }
  
  componentWillUnmount(){
    document.addEventListener('keydown', this.keyPressed);
  }
  
  keyPressed(e){
    const key = e.keyCode;
    let newAudio = keys.filter(item => {if (item.name.charCodeAt(item.name) == key ) return item});
    
    let url = newAudio[0].url;
    let newClip = new Audio(url);
    newClip.play();
  }
  
  handleClick() {    
    this.setState({
      play:!this.state.play,
    });
    
    const audio = event.target.querySelector('audio');
    console.log(audio);
    audio.play();
    audio.currentTime = 0;
  }
  
  render(){
    let drumpad = keys.map(item => <div id={item.description}>
      <div id='display'>
        <button className='drum-pad' id={item.name} onClick={this.handleClick}>{item.name}
          <audio className='clip' id={item.name} src={item.url} ref={ref => this.audio = ref}/>
        </button>
      </div>
  </div>);
    
    return (
      <div id='drum-machine'>
      <p>This is a test</p>
        {drumpad}
      </div>
    );
  }
}
      
ReactDOM.render(<App />, document.getElementById('root'));
2

charCodeAt takes index as argument you are trying to pass a value
pease tell me the exact error of undefined
or you could add the numerical value of each key in array and take that value from keys with e.which

3

So it’s still not working, but here is what i did:

 keyPressed(e){
    const key = e.keyCode;
    //let newAudio = keys.filter(item => {if (item.name.charCodeAt(item.name) == key ) return item});
    let newAudio = keys.find(item => {if (item.name.charCodeAt(item.name) == key) return item;});
    console.log(newAudio);
    let url = newAudio.url;
    let newClip = new Audio(url);
    newClip.play();
  }

When I put if(item.name==key) for the condition it returned undefined so i kept what i had earlier, the 7th test still doesnt pass even though it still works, any ideas?