Drum Machine Test 7 is failing

[lasjorg]

It appears related to React 18. More info.

Stuck on Drum Machine test #7

Hi. First of all, I have some trouble about the User Story #7. I’m sure that every time the .drum-pad was triggered, #display changed to different text. But it still not pass the test. Did I miss anything? Secondly, I tried to use the testing code to see what happen. I confuse why the #display's attribute innerText always return empty string when .drum-pad was triggered? Normally, it should have text inside. Here is my codepen Thanks for your time. Challenge: Build a Drum Machine

---

In your code, I can fix it using flushSync

import { flushSync } from 'react-dom';

const playAudioClips = () => {
  flushSync(() => {
    setDisplayDescription(clip.displayDescription);
  });
  let newClip = document.getElementById(clip.label);
  newClip.play();
};

---

As an aside, I would suggest you move the logic out of the button component and into App. It really doesn’t belong there, especially not the event listener setup.