Tell us what’s happening:
In th App component I have method ‘display’ that should set state for the property ‘display’.
‘display’ takes parameter ‘name’ from the PlayBeats component.
In the component PlayBeats, within the ‘playSound’ method, ‘display’ should take ‘this.props.clipId’ as a parameter and pass it to the App component, to the ‘display’ method.
App should then render this to the screen.
This is not happening. There are no errors. Other than that, ‘playSound’ works normally-it does play beat when I press the key.
I don’t know how to investigate this further.
Can you please help me.
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"
}
];
class PlayBeats extends React.Component {
constructor(props) {
super(props);
this.playSound = this.playSound.bind(this);
this.handleKeyPress = this.handleKeyPress.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);
}
}
playSound() {
const sound = document.getElementById(this.props.keyTrigger);
sound.play();
this.props.display(this.props.clipId);
}
render() {
//console.log(this.props.clipId)
return (
<div id="drum-machine">
<div
className="drum-pad"
id={this.props.clipId}
onClick={this.playSound}
>
<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)
};
this.display = this.display.bind(this);
}
display(name) {
this.setState({
display: namme
});
}
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.state.display}
/>
);
});
return (
<div id="drum-machine">
{forPlayBeats}
<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: