React Error on keydown event (Drum Machine)

Hi everyone,

I am hoping one of you could point me towards a solution to this error. I have just started working on the Drum Machine project and am having trouble finding the solution to the error.

Here is my code for a child component with an event listener to select and play the audio component

const DrumPad = (props) => {
  return (
    <div className="drum-pad" id={props.sound}>
      <p className="drum-pad-text">{}</p>
      <audio className="clip" src={props.src} id={} />

window.addEventListener('keydown', (e) => {
  let audio = document.getElementById(e.key.toUpperCase())
  if (!audio) {

Here is the error I receive in Chrome Devtools:

index.js:1582 Uncaught Error: The error you provided does not contain a stack trace.
at B (index.js:1582)
at G (index.js:1899)
at index.js:1914
at index.js:1933
at index.js:1414
B @ index.js:1582
G @ index.js:1899
(anonymous) @ index.js:1914
(anonymous) @ index.js:1933
(anonymous) @ index.js:1414

DrumPad.js:18 Uncaught (in promise) DOMException
(anonymous) @ DrumPad.js:18

Line 18 in the child component is where I call the play() method on the audio element.

Thanks all.

I am assuming you get this error when you press down a key to play.

Without seeing the actual demo, I think it probably has to do with the way you access DOM. It’s always better to use ref when you are referring to actual DOMs in react.

Would ref’s matter if I am coding the event listener within the same file as the functional child component?

The way I read that article, refs are a way to modify a child component DOM node from the parent component. I am probably misunderstanding refs as my reading comprehension usually throws me for loops.

Here is the parent component for the child component in the original post:

class DrumMachine extends React.Component {
  state = {
    keyArray: ["Q", "W", "E", "A", "S", "D", "Z", "X", "C"],
    soundArray: ["Clap", "Crash", "Hi-Hat(Closed)", "Hi-Hat(Open)", "Kick", "Perc", "Ride", "Snare 1", "Snare 2"],
    srcArray: ["../sounds/Clap.wav", "../sounds/Crash.wav", "../sounds/HiHat_closed.wav", "../sounds/HiHat_open.wav", "../sounds/Kick.wav", "../sounds/Perc.wav", "../sounds/Ride.wav", "../sounds/Snare_1.wav", "../sounds/Snare_2.wav"],

  render () {
    return (
      <div id="drum-machine">
        <DrumPad id={this.state.keyArray[0]} text={this.state.keyArray[0]} sound={this.state.soundArray[0]} src={this.state.srcArray[0]} ref={this.state.myRef} />
        <DrumPad id={this.state.keyArray[1]} text={this.state.keyArray[1]} sound={this.state.soundArray[1]} src={this.state.srcArray[1]} ref={this.state.myRef} />
        <DrumPad id={this.state.keyArray[2]} text={this.state.keyArray[2]} sound={this.state.soundArray[2]} src={this.state.srcArray[2]} ref={this.state.myRef} />
        <DrumPad id={this.state.keyArray[3]} text={this.state.keyArray[3]} sound={this.state.soundArray[3]} src={this.state.srcArray[3]} ref={this.state.myRef} />
        <DrumPad id={this.state.keyArray[4]} text={this.state.keyArray[4]} sound={this.state.soundArray[4]} src={this.state.srcArray[4]} ref={this.state.myRef} />
        <DrumPad id={this.state.keyArray[5]} text={this.state.keyArray[5]} sound={this.state.soundArray[5]} src={this.state.srcArray[5]} ref={this.state.myRef} />
        <DrumPad id={this.state.keyArray[6]} text={this.state.keyArray[6]} sound={this.state.soundArray[6]} src={this.state.srcArray[6]} ref={this.state.myRef} />
        <DrumPad id={this.state.keyArray[7]} text={this.state.keyArray[7]} sound={this.state.soundArray[7]} src={this.state.srcArray[7]} ref={this.state.myRef} />
        <DrumPad id={this.state.keyArray[8]} text={this.state.keyArray[8]} sound={this.state.soundArray[8]} src={this.state.srcArray[8]} ref={this.state.myRef} />

I am sure there is a cleaner way to render those child components, but at the moment, just trying to get the sound functionality to work.

Thanks for the help

I made a sandbox with your code and it works fine: