drum-machine | A simple Drum Machine with Create-react-app | Frontend Framework library

I am building a drum machine and one of the challenges is to set up keyboard events to the pads displayed. Please take a look at the code I wrote. There is no event triggered when I smashed the button on my keyboard. Is there anything wrong here? I did a little bit research and I found out that in most cases onKeyPress is bound to

I am trying to make a drum machine that will play a different sound when each button is pressed. I am using CodePen to make the project and I keep getting an object error when I try to use the DrumPad Component. Any help would be greatly appreciated. The relevant code is below.

Here is the link to my CodePen App: https://codepen.io/bbond766/pen/NWdLNog?editors=0010

I am working on a Drum machine project where I am failing to pass a task. the task is:

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.).

My code so far:

So I am doing a drum machine project on Freecodecamp, where I am failing this condition.

" When I click on a .drum-pad element, the audio clip contained in its child element should be triggered. " So how do I trigger child element(in this case the audio element,to play the audio) while clicking or pressing the parent element?

I wrote something like this

I'm a newbie to React and currently building a drum-machine. I have wired up the drum-machine to play an audio contained inside its DrumPad child component.My problem is am failing make an id representing each audio display whenever its parent drum-pad div is clicked. I know I need to initialize state and then setState but I dont know how to implement it in my code.

here is my code

I'm building a fcc-drum machine using React I get the following error when trying to map a data object:

Error: Element type is invalid: expected a string (for built-in components) or a class/function (for composite components) but got: object. You likely forgot to export your component from the file it's defined in, or you might have mixed up default and named imports.

Check the render method of App.

Below is the data that I am trying to map along with my code:

I am trying to play the audio onClick in react, however I got the error, I did check the ref, it is the audio element, I don't know what's wrong, any help will be much appreciated.

I created a Drum Machine with ReactJS, and I can't find a way to make the buttons look like clicked when I press the corresponding key. I found the following question on the site, but I can't make refs work with my code and I don't know why:

Apply button 'Active' styles on keypress in React

I also read that string refs are not advised against now, sow I really don't know how to approach this.

Here is the link to my app: https://codesandbox.io/s/github/AldanaBRZ/drum-machine

On the Drum Machine challenge: https://www.freecodecamp.org/learn/front-end-libraries/front-end-libraries-projects/build-a-drum-machine

I have got the cdn script from FCC saying that all tests have passed, but when I try and press keys to run the function calling the audio clip to played, nothing happens - am I missing something here?

Keys Components