Drum Machine - Audio not switching

Hello!

I’m currently working on the Drum Machine project in the Front-End Libraries course, and I have hit a snag.

I have two banks of audio sources (like in the example project), and I can’t seem to get the audio to switch from one bank to another when I press the ‘Change Bank’ button. The bank state does change, as can be seen from the ID being displayed, but the audio does not. What am I doing wrong?

Here is the Codepen link of the project: https://codepen.io/arunmuralidharan/pen/jOqZEBP

Add a key attribute to the button element in the map, e.g. the kit.id

key={kit.id}

Took me some time to figure it out and it wasn’t until I use CodeSandbox instead. Because unlike Codepen it actually gives you the warnings.

1 Like

Thank you so much! I completely forgot about the ‘key’. It works now. :smiley:

1 Like

As I said, I didn’t even think about it until the editor yelled at me.

I would strongly suggest using Codesandbox for React and not Codepen. The developer experience is so much better and more like what you get when working locally. You can still submit the project just fine using Codesandbox.

1 Like

Oh, nice! In that case, I will switch my project to Codesandbox. Thanks again!