Drum Machine issue

So I have a couple things that I can’t wrap my head around with my Drum Machine app. The good news is that at this point it passes all the user stories but there are a few glitches and styles ( which I will do after the logic is worked out ) I need to work out. The error happens when I hit a key other than “QWEASDZXC”. I have tried using an if statement to only play the sound when it finds something but that does not seem to work. Here is a link to my pen.

function useDrumMachine() {
    const [beat, setBeat] = useState('Instrument')

    function handlePress(e) {
        const { id } = e.target
        const beatStore = keys.find(buttonItem => buttonItem.keyCode == id)
        document.getElementById(beatStore.letter).play()
        setBeat(beatStore.name)
    }

    function handleKeydown(e) {
        const beatPlace = keys.find(keyItem => keyItem.keyCode === e.keyCode)
        document.getElementById(beatPlace.letter).play()
        setBeat(beatPlace.name)
    }

      
    const keyArr = keys.map(item => {
        return (
            <a key={item.id} id={item.name} id={item.keyCode} onClick={handlePress} className="drum-pad btn">
              <audio id={item.letter} src={item.sound} className="clip" preload="auto"></audio>
              {item.letter}
            </a>
        )
    })

    useEffect(() => {
        document.addEventListener('keydown', handleKeydown)
    }, [])

    return { handlePress, keyArr, beat}    
}

function App() {
  const { keyArr, beat } = useDrumMachine()
  
  return (
    <div id="drum-machine">
      {keyArr}
      <p id="display">{beat}</p>
    </div>
  )
}

What kind of if condition were you using? As one of the options you can use typeof to check if beatStore is undefined before trying to access it.

1 Like