[REACT] Build a Drum Machine works. Fails tests 6 and 7

Hello. I put a lot of effort into this exercise and tried to write “the correct structure” using React and Bootstrap. It seems the tests were written with vanilla JS in mind and I can see how to pass them that way. But even ignoring more elegant React functionalities and using things like JS event listeners and useRef, tests 6 and 7 fail, even though the app does what is requested. I tried everything to make it pass for days. So:

  1. Can anybody take a look at my code and tell me if there is some obvious error I didn’t notice?
  2. My app works. It fulfills all user stories. Is it worth trying to pass the tests?

Repository: GitHub - getuliosilva/fcc-drum-machine: freeCodeCamp build a drum machine exercise
Deployed app: Drum Machine

User Story #7: 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 am not seeing a string describing which audio clip is being played when I try to click on one of the applicable drum pad letters. It does show a string if I press a corresponding letter but not when clicking one of the letter buttons.

Thanks a lot for taking the time to look at my app. I fixed the error you mentioned. It’s funny, if I just put the text on the screen, the test passes, but if I remove the text after the click, the test fails. Considering this post and that I’m using React 18, I will stop developing this app and write a new one using vanilla JS in the future.