Tell us what’s happening:
I have written a code that shoul set state to “activeStyle” when key is pressed.
‘handleKeyPress(e)’ should activate ‘playSound()’ - it does.
‘playSound()’ should then play beat - it does.
‘playSound()’ should also call ‘activatePad()’ method that sets state.padStyle to the ‘activeStyle’.
This does not happen. When I press key I can hear beat, but the style of the key is not changed. I can not see why.
Can you please help.
Many thanks.
Your code so far
const beatsOne = [
{
keyCode: 81,
keyTrigger: "Q",
id: "Heater-1",
url: "https://s3.amazonaws.com/freecodecamp/drums/Heater-1.mp3"
},
{
keyCode: 87,
keyTrigger: "W",
id: "Heater-2",
url: "https://s3.amazonaws.com/freecodecamp/drums/Heater-2.mp3"
},
{
keyCode: 69,
keyTrigger: "E",
id: "Heater3",
url: "https://s3.amazonaws.com/freecodecamp/drums/Heater-3.mp3"
},
{
keyCode: 65,
keyTrigger: "A",
id: "Heater4",
url: "https://s3.amazonaws.com/freecodecamp/drums/Heater-4_1.mp3"
},
{
keyCode: 83,
keyTrigger: "S",
id: "Clap",
url: "https://s3.amazonaws.com/freecodecamp/drums/Heater-6.mp3"
},
{
keyCode: 68,
keyTrigger: "D",
id: "Open-HH",
url: "https://s3.amazonaws.com/freecodecamp/drums/Dsc_Oh.mp3"
},
{
keyCode: 90,
keyTrigger: "Z",
id: "Kick-n'-Hat",
url: "https://s3.amazonaws.com/freecodecamp/drums/Kick_n_Hat.mp3"
},
{
keyCode: 88,
keyTrigger: "X",
id: "Kick",
url: "https://s3.amazonaws.com/freecodecamp/drums/RP4_KICK_1.mp3"
},
{
keyCode: 67,
keyTrigger: "C",
id: "Closed-HH",
url: "https://s3.amazonaws.com/freecodecamp/drums/Cev_H2.mp3"
}
];
const activeStyle = {
backgroundColor: "#332211",
color: "orange"
};
const inactiveStyle = {
marginTop: "10px",
color: "#332211"
};
class PlayBeats extends React.Component {
constructor(props) {
super(props);
this.playSound = this.playSound.bind(this);
this.handleKeyPress = this.handleKeyPress.bind(this);
this.activatePad = this.activatePad.bind(this);
}
componentDidMount() {
document.addEventListener("keydown", this.handleKeyPress);
}
componentWillUnmount() {
document.addEventListener("keydown", this.handleKeyPress);
}
handleKeyPress(e) {
if (e.keyCode === this.props.keyCode) {
this.playSound();
this.props.display(this.props.clipId);
}
}
activatePad() {
this.setState({
padStyle: activeStyle
});
}
playSound() {
const sound = document.getElementById(this.props.keyTrigger);
sound.play();
this.props.display(this.props.clipId);
this.activatePad();
setTimeout(() => this.activatePad(), 100);
}
render() {
console.log(activeStyle);
return (
<div id="drum-machine">
<div
className="drum-pad"
id={this.props.clipId}
onClick={this.playSound}
style={this.props.padStyle}
>
<audio
className="clip"
id={this.props.keyTrigger}
src={this.props.clip}
/>
{this.props.keyTrigger}
</div>
</div>
);
return;
}
}
class App extends React.Component {
constructor(props) {
super(props);
this.state = {
beat: beatsOne,
display: String.fromCharCode(160),
padStyle: inactiveStyle
};
this.display = this.display.bind(this);
}
display(name) {
this.setState({
display: name
});
}
render() {
let forPlayBeats;
forPlayBeats = this.state.beat.map((obj, i, objArr) => {
return (
<PlayBeats
keyTrigger={objArr[i].keyTrigger}
keyCode={objArr[i].keyCode}
clipId={objArr[i].id}
clip={objArr[i].url}
display={this.display}
padStyle={this.state.padStyle}
/>
);
});
return (
<div id="drum-machine">
<div id="inner-container">{forPlayBeats}</div>
<p id="display">{this.state.display}</p>
</div>
);
} // render ends
}
ReactDOM.render(<App />, document.getElementById("App"));
Your browser information:
User Agent is: Mozilla/5.0 (Windows NT 6.1; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/95.0.4638.69 Safari/537.36
Challenge: Build a Drum Machine
Link to the challenge: