Front End Development Libraries Projects - Build a Drum Machine

JavaScript
1

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:

2

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 (props.drumPads.map((pad,index) => {
    return (
        <div className="drum-pad" key={index} id={pad.name}>      
          <button onClick={() => props.play(pad.key, pad.name)}>
          {pad.key}
            <audio className="clip" id={pad.key} src={pad.url} />
          </button>
        </div>
      )
  }));
}

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

3

Brilliant - cracked it! Thanks for the hint.

Now off to play with CSS :framed_picture:

1 Like