Drum Machine "Test 8/8" but not passing all the test?


I completed my drum machine project and everything works, but it seems like I am not passing the test.
The test result says “Test 8/8 ( * passes: 8, failures: 3)” but its highlighted by red.
Could anyone advise me what’s happening here?

My codepen: https://codepen.io/eriko87/pen/vqWQmd

You need to get rid of the line specified below in the onClick anonymous function of the button in the render method:

            onClick={() => {
              this.handleKeyPress(event, key.id); // Remove this line.  It is not needed anyway

On a side note, I recommend put your if statement which references this.state.keyCode inside the optional callback function for setState to absolutely guarantee the state has been updated before you compare the event.keyCode to this.state.keyCode. If you were to add other features later which update the state of the component, you could not be guaranteed the state would be updated in time (because of the asynchronous nature of the setState method).

I suggest replacing:

  handleKeyPress(event, refID) {
    if (event.keyCode === this.state.keycode) {


  handleKeyPress(event, refID) {
      keycode: event.keyCode
    }, () => {
      if (event.keyCode === this.state.keycode) {

Currently, when you click the buttons, the text below the buttons shows the name of the current sound. Even thought it is not tested (though I think it should be), I think it would make sense for the text to change when you press the key of a sound. See if you can added that feature to your app to make it stand out.

Thank you for the advise! It is really helpful!
I fixed the display function for the key press too :slight_smile:

I will change the color of the buttons when they are pressed in the future too to make it look better.