Front End Development Libraries Projects - Build a Drum Machine

[Felster]

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!

FCC Drum Machine

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:

freeCodeCamp.org

[skaparate]

Hello! Welcome to the community !

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?

[Felster]

Brilliant - cracked it! Thanks for the hint.

Now off to play with CSS