Tell us what’s happening:
I am trying to check what exactly is my code rendering to the screen. ‘this’ keyword suggests that my props are coming from the component’s state.
‘this.id’ suggests that props are passed from an array of objects called ‘beats’.
Render method does not render {this.props.id} to the screen.
console.log({this.props.id}) does not print out anything.
Given the code bellow, where are my props are coming from? Component’s state or from ‘beats’ array?
How can I “print out” what is being passed to the render method?
Many thanks.
P.S. I commented out all other methids in order to simplify this inquiry.
Your code so far
const beats = [
{
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: "",
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"
}
];
//keys
const buttons = beats.map((item) => {
return item.keyTrigger;
});
//React component
class Drum extends React.Component {
constructor(props) {
super(props);
this.state = {
padStyle: "test"
};
//bind methods here
// this.handelKeyPress=this.handleKeyPress.bind(this);
}
//declare methods here
/*componentDidMount() {
doucment.addEventListener("keydown", this.handleKeyPress);
}
handleKeyPress(event) {
if(event.keyCode===this.props.keyCode){
this.playNote();
}
}
playNote() {
sound.play();
} */
render() {
return (
<div className="drum-pad" id={this.props.id}>
<audio id={this.props.keyTrigger} />
{this.props.id}
</div>
);
}
}
ReactDOM.render(<Drum />, 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/92.0.4515.159 Safari/537.36
Challenge: Build a Drum Machine
Link to the challenge: