Drum Machine help

JavaScript
1

I’m new to web development. I started learning it from the last month. I’m stuck on drum machine challenge. My components won’t render. I have’t used css or added any click event. I just wanted to see if the drumpad component renders. I’ll be adding more functionality once its done.
Please help. Thank you.
codePenLink

const bankOne = [{
    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: 'Heater-3',
    url: 'https://s3.amazonaws.com/freecodecamp/drums/Heater-3.mp3'
  }, {
    keyCode: 65,
    keyTrigger: 'A',
    id: 'Heater-4',
    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 DrumPad extends React.Component{
  render(){
    return(
      <div className="drum-pad" id={this.props.clipId}>
        <audio src={this.props.clip} class="clip" type="audio/mp3"
        id={this.props.keyTrigger}></audio>
        <p>{this.props.keyTrigger}</p>
      </div>
    );
  }
}

class PadBank extends React.Component{
  constructor(props){
    super(props);
    
  }
    render(){
    let drums = bankOne.map(
    (drum, i, drumArr) => {
      return (
      <DrumPad clip={drumArr[i].url}
        keyTrigger={drumArr[i].keytrigger}
        clipId={drumArr[i].id} />);
      
    }
    );
    return(
      <div>
      {drums}
       </div>
    );
  }

}

class App extends React.Component{
  render(){
    return(
      <div>
        <h1>works</h1>
        <PadBank />
      </div>
    );
  }
}
ReactDOM.render(<App />, document.getElementById("root"))te code here
2

Your components are rendering but you are not displaying anything.

I have added a <p> to your DrumPad component that displays the clipId of the component it is rendering.

class DrumPad extends React.Component{
  render(){
    return(
      <div className="drum-pad" id={this.props.clipId}>
        <audio src={this.props.clip} class="clip" type="audio/mp3"
        id={this.props.keyTrigger}></audio>
        <p>{this.props.keyTrigger}</p>
        <p>{this.props.clipId}</p>
      </div>
    );
  }
}

Add that line to your code as well and I think you will see what I mean. Then next task would be to add an onClick event to play the sound, good luck!