Drum Machine Test #7 Failing

Hi there,

I am seeking someone’s help! For the life of me I cannot figure out why my app won’t pass test number 7. I can see the unique string for each audio item being displayed as I play each audio clip, and the text is correct when I use console.log on the element’s inner text.

Thanks in advance for your help.

It’s my understanding you shouldn’t be updating the DOM directly when using React.JS. It’s considered bad practice.

Now, I am not sure if that is the reason why test #7 isn’t passing but perhaps there is an interaction with the Virtual React DOM and the #display element causing the text to fail?

I would try maybe sticking the display text in the state and changing the text using this.setState({display: … }); Good luck, I’m working on the Drum Machine project right now too.

Excellent point. You are most correct. That may not be the cause, but you are right that I should fix it. I’ll do that now. Thank you!

1 Like

Let us know if you figure it out!

Well, I changed that–easy change, obviously. But it still fails the test. I would like to see how the test is actually written because from what I see, this code passes.

Nothing like looking at the code!

This project expects each drum pad to have a click event, too. I’m just capturing keyboard input. I need to rewrite my project attach an event to each drum pad and then I think it will pass.

            drumPads.forEach(pad => {
1 Like

@amberdiehl Did you ever get this working? I just finished my Drum Machine well enough that it passes all tests. :smiley:

Ah, you’re being mean! :wink: No, I have not spent time on it. I took the weekend off a bit and today have been busy with client work. That said, I think I’ll spend a little time on it now and see if I can close it out. The calculator looks like fun.

Here’s the Github link you were asking about: https://github.com/freeCodeCamp/freeCodeCamp

1 Like