# React Drum App works well, but 2 Tests still failing

**URL:** <https://forum.freecodecamp.org/t/react-drum-app-works-well-but-2-tests-still-failing/513437>\
**Category:** I Built This\
**Created:** [May 31, 2022, 6:13pm UTC](https://forum.freecodecamp.org/t/react-drum-app-works-well-but-2-tests-still-failing/513437 "2022-05-31T18:13:02Z")\
**Posts on this page:** 11\
**Page:** 1

<div class="post-metadata">

**Author:** ![curious\_avocado](https://sea3.discourse-cdn.com/freecodecamp/user_avatar/forum.freecodecamp.org/curious_avocado/32/172413_2.png) [@curious\_avocado](https://forum.freecodecamp.org/u/curious_avocado)\
**Post date:** [May 31, 2022, 6:13pm UTC](https://forum.freecodecamp.org/t/react-drum-app-works-well-but-2-tests-still-failing/513437/1 "2022-05-31T18:13:02Z")

</div>

**Despite the app working (near perfectly) well. These 2 tests still fail:**

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

- When I press the trigger key associated with each .drum-pad, the audio clip contained in its child element should be triggered (e.g. pressing the Q key should trigger the drum pad which contains the string “Q”, pressing the W key should trigger the drum pad which contains the string “W”, etc.).

I think it has to do with how my `<audio/>` element is nested within `<button/>` but I don’t know how else to do it.

Also, handleKeyPress works well except I have to manually put focus on eact button before pressing them triggers a sound. (i.e button won’t work unless i click it first).

I’d really appreciate help on this or any fresh perspective on the problem 🙏🏼

my live code: [https://reactdrumm-by-ejiro.netlify.app/](https://reactdrumm-by-ejiro.netlify.app/)  
the source code: [GitHub - Ejiro-David/react-drummer](https://github.com/Ejiro-David/react-drummer)

---

<div class="post-metadata">

**Author:** ![bbsmooth](https://sea3.discourse-cdn.com/freecodecamp/user_avatar/forum.freecodecamp.org/bbsmooth/32/203556_2.png) [@bbsmooth](https://forum.freecodecamp.org/u/bbsmooth)\
**Post date:** [May 31, 2022, 6:14pm UTC](https://forum.freecodecamp.org/t/react-drum-app-works-well-but-2-tests-still-failing/513437/2 "2022-05-31T18:14:54Z")

</div>

I’m getting a syntax error on your live code version and so it doesn’t work at all.

---

<div class="post-metadata">

**Author:** ![bbsmooth](https://sea3.discourse-cdn.com/freecodecamp/user_avatar/forum.freecodecamp.org/bbsmooth/32/203556_2.png) [@bbsmooth](https://forum.freecodecamp.org/u/bbsmooth)\
**Post date:** [May 31, 2022, 6:16pm UTC](https://forum.freecodecamp.org/t/react-drum-app-works-well-but-2-tests-still-failing/513437/3 "2022-05-31T18:16:27Z")

</div>

> [@curious\_avocado](#):
>
> I think it has to do with how my `<audio/>` element is nested within `<button/>` but I don’t know how else to do it.

It has to do with the fact that you are playing the sound by creating a new Audio element. The tests want you to use `play` directly on the audio element in the HTML.

---

<div class="post-metadata">

**Author:** ![curious\_avocado](https://sea3.discourse-cdn.com/freecodecamp/user_avatar/forum.freecodecamp.org/curious_avocado/32/172413_2.png) [@curious\_avocado](https://forum.freecodecamp.org/u/curious_avocado)\
**Post date:** [May 31, 2022, 6:16pm UTC](https://forum.freecodecamp.org/t/react-drum-app-works-well-but-2-tests-still-failing/513437/4 "2022-05-31T18:16:56Z")

</div>

please could you reply with a screenshot, it looks fine on my end.

 ![Screenshot 2022-05-31 at 19.16.29](https://global.discourse-cdn.com/freecodecamp/original/4X/2/2/b/22bdf763297554e4a75f4b4ef517d64955adf08e.jpeg)

---

<div class="post-metadata">

**Author:** ![bbsmooth](https://sea3.discourse-cdn.com/freecodecamp/user_avatar/forum.freecodecamp.org/bbsmooth/32/203556_2.png) [@bbsmooth](https://forum.freecodecamp.org/u/bbsmooth)\
**Post date:** [May 31, 2022, 6:17pm UTC](https://forum.freecodecamp.org/t/react-drum-app-works-well-but-2-tests-still-failing/513437/5 "2022-05-31T18:17:44Z")

</div>

I’m not seeing the buttons at all. Here is the error I am getting:

SyntaxError: JSON.parse: unexpected character at line 1 column 1 of the JSON data [App.js:38:14](https://reactdrumm-by-ejiro.netlify.app/static/js/App.js)

---

<div class="post-metadata">

**Author:** ![curious\_avocado](https://sea3.discourse-cdn.com/freecodecamp/user_avatar/forum.freecodecamp.org/curious_avocado/32/172413_2.png) [@curious\_avocado](https://forum.freecodecamp.org/u/curious_avocado)\
**Post date:** [May 31, 2022, 6:18pm UTC](https://forum.freecodecamp.org/t/react-drum-app-works-well-but-2-tests-still-failing/513437/6 "2022-05-31T18:18:41Z")

</div>

I’ve tried to do audio.play() directly but it breaks my entire code, do you have any ideas on how else I could do it?

---

<div class="post-metadata">

**Author:** ![curious\_avocado](https://sea3.discourse-cdn.com/freecodecamp/user_avatar/forum.freecodecamp.org/curious_avocado/32/172413_2.png) [@curious\_avocado](https://forum.freecodecamp.org/u/curious_avocado)\
**Post date:** [May 31, 2022, 6:20pm UTC](https://forum.freecodecamp.org/t/react-drum-app-works-well-but-2-tests-still-failing/513437/7 "2022-05-31T18:20:48Z")

</div>

I’ll fix this in a minute.

---

<div class="post-metadata">

**Author:** ![bbsmooth](https://sea3.discourse-cdn.com/freecodecamp/user_avatar/forum.freecodecamp.org/bbsmooth/32/203556_2.png) [@bbsmooth](https://forum.freecodecamp.org/u/bbsmooth)\
**Post date:** [May 31, 2022, 6:21pm UTC](https://forum.freecodecamp.org/t/react-drum-app-works-well-but-2-tests-still-failing/513437/8 "2022-05-31T18:21:40Z")

</div>

If you want to pass all the tests then you’ll have to refactor your code. It shouldn’t take much effort.

---

<div class="post-metadata">

**Author:** ![curious\_avocado](https://sea3.discourse-cdn.com/freecodecamp/user_avatar/forum.freecodecamp.org/curious_avocado/32/172413_2.png) [@curious\_avocado](https://forum.freecodecamp.org/u/curious_avocado)\
**Post date:** [May 31, 2022, 6:39pm UTC](https://forum.freecodecamp.org/t/react-drum-app-works-well-but-2-tests-still-failing/513437/9 "2022-05-31T18:39:29Z")

</div>

Fixed this problem, I made all required sound data locally available in the app.js file. I still need help with the other 2 aforementioned problems. Thank you.

---

<div class="post-metadata">

**Author:** ![lasjorg](https://sea3.discourse-cdn.com/freecodecamp/user_avatar/forum.freecodecamp.org/lasjorg/32/280761_2.png) [@lasjorg](https://forum.freecodecamp.org/u/lasjorg)\
**Post date:** [May 31, 2022, 7:09pm UTC](https://forum.freecodecamp.org/t/react-drum-app-works-well-but-2-tests-still-failing/513437/10 "2022-05-31T19:09:57Z")

</div>

As said, you have to call play on the audio element, how you want to get to them is up to you (refs or just a DOM selector).

If you attach the key handler to each button they have to have focus. One option is to attach the listener to the document instead and look at the event object you get access to inside the handler (it has info on which key was pressed).

---

<div class="post-metadata">

**Author:** ![system](https://global.discourse-cdn.com/freecodecamp/original/3X/e/1/e1c433102e34b46dfaa3e15d13ab9a514b127078.svg) [@system](https://forum.freecodecamp.org/u/system)\
**Post date:** [November 30, 2022, 7:10am UTC](https://forum.freecodecamp.org/t/react-drum-app-works-well-but-2-tests-still-failing/513437/11 "2022-11-30T07:10:40Z")

</div>

Closed on November 30, 2022, 7:10am UTC

This topic was automatically closed 182 days after the last reply. New replies are no longer allowed.