2 questions for 2 tests to pass in Drum Machine Project (React)

1

Hello every1,

My question is I need to pass the last 2 tests for my Drum Machine project but I did not know how to get it fixed.

The first one, When I click on a .drum-pad element, the audio clip contained in its child element should be triggered.

When I click on any of those letters I get sound but it still does not pass! Is it mean when I press buttons on the keyboard should be triggered instead of clicking on the mouse?? And how do I do that?? And do I need to use this.props.keyTrigger??

The second one, When a .drum-pad is triggered, a string describing the associated audio clip is displayed as the inner text of the #display element (each string must be unique).

I believe I have to use this.props.id after they all processed inside the Map method but when I put it in the P element it does not work. I am still weak in using props :frowning:

Here is my code on CodePen: https://codepen.io/andrewalkazeer/pen/PxJpGr

Note I have seen a video on Youtube but I still did not understand the whole code that he typed in!!

Here is the 3 parts video links for his video:

Part1: https://www.youtube.com/watch?v=nBF6dFjb7p0&index=57&list=PLVWYrGzaUcYomjy5RIwIBhYoJXqGH5_d2&t=1s

Part2: https://www.youtube.com/watch?v=QXX4aI9DOVE&index=56&list=PLVWYrGzaUcYomjy5RIwIBhYoJXqGH5_d2&t=261s

Part3: https://www.youtube.com/watch?v=Sqb5oMIa4yo&index=55&list=PLVWYrGzaUcYomjy5RIwIBhYoJXqGH5_d2&t=1s

Thank You. :slight_smile:

2

Hi, I understand this is still a WIP, but two things may affect the results:

  1. Your App Conponent doesn’t have a handleDisplay method to start with, so handleClick method inside DrumPad will always throw an error because of this line this.props.handleDisplay(). Also your DrumPad has no constructor, hence no access to props whatsoever.

  2. How come you have 2 handleClick method inside DrumPad? Remove one to check if it works.

1 Like
3

As I understood from you I have to have constructor with props for both main component (App) and the sub component (DrumPad) in order to use props.

yea it does not make sense to have two functions with the same name and does the same thing, I forgot to remove it. It still did not work.

If I wanna use the keyboard to hit those buttons should I use document.addEventListener ?? And do I have to put it inside the handleClick function?