Need help with Drum Machine

Tell us what’s happening:
I can’t pass the last 2 test. Please help me to figure out what I’m doing wrong. Thanks

Your code so far

https://codepen.io/linataaffe/pen/WNNOZmw

Your browser information:

User Agent is: Mozilla/5.0 (Macintosh; Intel Mac OS X 10_13_6) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/77.0.3865.120 Safari/537.36.

Challenge: Build a Drum Machine

Link to the challenge:
https://www.freecodecamp.org/learn/front-end-libraries/front-end-libraries-projects/build-a-drum-machine

You need to check your browser’s console and fix the errors shown there first.

I have fixed some errors, please help me check why I can’t pass test 7, I click on the bottoms and they all play. Also, if I can get a tip on test 8, I tried many different ways and I still can’t figure how to make it work. Thanks in advance!

https://codepen.io/linataaffe/pen/WNNOZmw

Test #7 is not about clicking on the buttons. It is about clicking the corresponding keys on the keyboard. For example, clicking Q on your keyboard should both play the sound associated with the A button and change the description of the sound being played.

FYI - The only thing which should be in your HTML section (on Codepen) is:

<div class="container-fluid">
    <div id="root"></div>
</div>

Everything in the style tags (excluding the styles tags themselves) should be moved to the CSS section. The cdn url you have at the top should be the last external JavaScript link in the JS settings tab. Also, you need to move the https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.1.3/css/bootstrap.min.css link out of the JS external links and put it as the last external link of the CSS settings.

Also, the following code in your HTML section should be deleted all together, because you already have Bootstrap version 4 in your CSS external links section, so you don’t need Version 3.

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous"/>

For test #8, I suggest creating a state property named display and update the property in the same setState call in the handleClick method. In the render method, you already have a p element with id of display. You can add {this.state.display} to be the content of the p element which will be updated on clicking a button or the applicable letter on the keyboard. The trick will be searching through the keys array to find the sound based on the the id of the sound being played.

Thank you so much for your help!