Build a Drum Machine - Sequencing setTimeout

Tell us what’s happening:

I’m trying to include record/play functionality into my drum machine project, which I’m building with React. So far, I’ve completed the record functionality, which creates a 2D array in the parent App component’s state.

The first sub-array includes time stamps (Date objects) of when the record button is clicked and stopped, as well as whenever a user clicks/presses a drum pad. I plan on using these Date objects to calculate the intervals between drum pad plays when a user clicks the Play button.

The second sub-array includes the ids of the drum pads being clicked/pressed, so I can reference them for playback.

I think that setTimeout is the way to go here, but I’m unsure of how to use it with the time stamps array I’ve created in the state. I’ve read one or two articles that reference using a recursive function to create a sequence of setTimeout calls, but it’s not clicking for me right now.

Any help is appreciated.

Your code so far

My project is up on Github Pages, and the source code is on the master branch. The relevant components would be App and Play.

Your browser information:

User Agent is: Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/75.0.3770.100 Safari/537.36.

Link to the challenge: