I am having trouble passing the last test. I pass all 6 tests and I also have the code to pass the last test, but when I implement it, I start getting problems.
Before implementing the piece of code that updates the string describing the associated audio clip to display, everything would work. When I press a key to play the drumpad, on the console it would show that it was pressed one time.
import React from 'react';
import './styles.scss';
const drumpads = [
{
drumpad: "Q",
keycode: 81,
src : "https://cdn.freecodecamp.org/testable-projects-fcc/audio/Heater-1.mp3"
},
{
drumpad: "W",
keycode: 87,
src: "https://cdn.freecodecamp.org/testable-projects-fcc/audio/Heater-2.mp3"
},
{
drumpad: "E",
keycode: 69,
src: "https://cdn.freecodecamp.org/testable-projects-fcc/audio/Heater-3.mp3"
},
{
drumpad: "A",
keycode: 65,
src: "https://cdn.freecodecamp.org/testable-projects-fcc/audio/Heater-4_1.mp3"
},
{
drumpad: "S",
keycode: 83,
src: "https://cdn.freecodecamp.org/testable-projects-fcc/audio/Heater-6.mp3"
},
{
drumpad: "D",
keycode: 68,
src: "https://cdn.freecodecamp.org/testable-projects-fcc/audio/Dsc_Oh.mp3"
},
{
drumpad: "Z",
keycode: 90,
src: "https://cdn.freecodecamp.org/testable-projects-fcc/audio/Kick_n_Hat.mp3"
},
{
drumpad: "X",
keycode: 88,
src: "https://cdn.freecodecamp.org/testable-projects-fcc/audio/RP4_KICK_1.mp3"
},
{
drumpad: "C",
keycode: 67,
src: "https://cdn.freecodecamp.org/testable-projects-fcc/audio/Cev_H2.mp3"
}
];
class DrumMachine extends React.Component{
constructor(props){
super(props);
this.playAudio = this.playAudio.bind(this);
this.state = {
displayDrum:''
};
}
playAudio(btn){
let audio = document.getElementById(btn);
console.log(audio);
audio.play();
//CODE BEFORE IMPLEMENTING
// this.setState({
// displayDrum: btn
// });
}
render(){
document.addEventListener('keydown',(e)=>{
console.log(e.key);
for(let drum of drumpads){
if(drum.drumpad === e.key.toUpperCase()){
this.playAudio(e.key.toUpperCase());
}
}
// this.playAudio(e.key.toUpperCase());
});
return (
<div id="drum-machine">
{/* <h1>TEST TEST TEST</h1> */}
<div id="display">
{this.state.displayDrum}
</div>
<div className="drums">
{drumpads.map((el)=>(
<div key={el.src} className="drum-pad" id="drumpad" onClick={()=>{this.playAudio(el.drumpad)}}>
{el.drumpad}
<audio src={el.src} id={el.drumpad} className='clip'></audio>
</div>
))}
</div>
</div>
);
}
}
export default DrumMachine;
But when I implement the code this.setState({displayDrum: btn});
it shows on the console that every time I press a key for the drumpad to play it would say it was pressed twice, then I pressed another key and it doubled, and it kept going on. Why is it doubling in the console when I update my state? The page works as intended and the display of the drumpad pressed works,
but when I run the tests, the test is stuck on executing and the drumpad is pressed over 14,000 times.
Please help.