Drum Machine using ReactJs

I’m solving the project of the Drum Machine, but I don’t know why I’m not passing the tests in spite of the project works OK.

Am I missing something?
Here is the pen: https://codepen.io/CarlosCordova/pen/gdwwZa

I tested you drum machine and the reason it fails is because it does not play a sound when you press the drum pad, only when you press the span inside the drum pad.

Oh, I see. Do you know why could that happen even if I attached the EventListener directly to the .drum-pad element?

As @steven_kuipers pointed out, the issue is here:

    const id = e.target.innerText;
    const audio = document.getElementById(id);

You try to get the id from the innerText of the drum-pad div, but you are thinking the inner text of the drum-pad looks something like “A” if you click on the drum-pad div containing the letter A.
However, because of the way you wrote your JSX, the innerText of the drum-pad div with the letter A actually looks like:


Why? Because your drum-pad divs do not just have {item.key} in them. They also have an audio element and line return, so you get that extra space and line return. If you write the let statement in your render as follows, it would work when not just the text is clicked and pass the test. To fix the issue, you can trim the extra white space characters by using the following in the handleClick function.

const id = e.target.innerText.trim();

Actually, you should not be referencing the DOM as you are as it is not a React “best practice”. You should be using refs for such tasks.

Thanks a lot!!
Now I know about refs for accessing the DOM. What I don’t know is why the tests stop in 8/8 are them just 8?

There are only 8 tests for that project.

1 Like