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