Front End Development Libraries Projects - Build a Drum Machine

Hello! I’m close to cracking the drum machine, but failing user story 7. You can see my code on CodePen below. No CSS yet, so excuse the way it looks!

I think it’s failing because I’m not updating the currentDrum correctly. I’m trying to switch from classes to hooks in React. When I console log (line 66) I get a list of all of the drums pressed so far. Is it just not updating fast enough?

Challenge: Front End Development Libraries Projects - Build a Drum Machine

Link to the challenge:

Hello! Welcome to the community :partying_face:!

You’re almost there! You just have some extra HTML elements that are interfering.

Take a look at the instructions:

…9 clickable drum pad elements, each with a class name of drum-pad

Now, if we take a look at your code:

function DrumDisplay(props){
  return (,index) => {
    return (
        <div className="drum-pad" key={index} id={}>      
          <button onClick={() =>,}>
            <audio className="clip" id={pad.key} src={pad.url} />

Your divs have the correct class but, are they clickable?

Brilliant - cracked it! Thanks for the hint.

Now off to play with CSS :framed_picture:

1 Like

This topic was automatically closed 182 days after the last reply. New replies are no longer allowed.