Use individual drum pad key press event listeners to satisfy assessment tests

drum-machine/public/index.html

@@ -36,6 +36,5 @@
       To begin the development, run `npm start` or `yarn start`.
       To create a production bundle, use `npm run build` or `yarn build`.
     -->
-    <script src="https://cdn.freecodecamp.org/testable-projects-fcc/v1/bundle.js"></script>
   </body>
 </html>

drum-machine/src/App.js

@@ -33,7 +33,6 @@ class App extends React.Component {
       bank: false,
       volume: 100,
       displayPanelText: "Drum Machine",
-      latestKeyPressed: undefined,
     };
     this.updateColors = this.updateColors.bind(this);
     this.togglePower = this.togglePower.bind(this);
@@ -41,24 +40,9 @@ class App extends React.Component {
     this.handleVolumeChange = this.handleVolumeChange.bind(this);
     this.toggleBank = this.toggleBank.bind(this);
     this.displayDrumPadPress = this.displayDrumPadPress.bind(this);
-    this.handleKeyPresses = this.handleKeyPresses.bind(this);
     this.updateColors();
   }
 
-  handleKeyPresses(event) {
-    this.setState({
-      latestKeyPressed: String(event.key).toUpperCase(),
-    });
-  }
-
-  componentDidMount() {
-    document.addEventListener("keydown", this.handleKeyPresses, false);
-  }
-
-  componentWillUnmount() {
-    document.removeEventListener("keydown", this.handleKeyPresses, false);
-  }
-
   togglePower() {
     this.setState((state) => ({
       power: !state.power,
@@ -70,7 +54,6 @@ class App extends React.Component {
   displayDrumPadPress(note) {
     this.setState({
       displayPanelText: note,
-      latestKeyPressed: undefined,
     });
   }
 
@@ -128,7 +111,6 @@ class App extends React.Component {
       drumPadKeys.push(
         <DrumPad
           drumPadKey={drumPad.key}
-          isKeyPressed={this.state.latestKeyPressed === drumPad.key}
           noteName={this.state.bank ? drumPad.altName : drumPad.name}
           audioSrc={this.state.bank ? drumPad.altAudioSrc : drumPad.audioSrc}
           power={this.state.power}
@@ -207,20 +189,26 @@ class DrumPad extends React.Component {
   constructor(props) {
     super(props);
     this.state = {};
-    this.handleClick = this.handleClick.bind(this);
+    this.playSound = this.playSound.bind(this);
+    this.handleKeyPress = this.handleKeyPress.bind(this);
+  }
+
+  handleKeyPress(event) {
+    if (String(event.key).toUpperCase() === this.props.drumPadKey) {
+      this.playSound();
+    }
   }
 
   componentDidMount() {
     this.audio = document.getElementById(this.props.drumPadKey);
+    document.addEventListener("keydown", this.handleKeyPress, false);
   }
 
-  componentDidUpdate() {
+  componentWillUnmount() {
-    if (this.props.isKeyPressed) {
+    document.removeEventListener("keydown", this.handleKeyPress, false);
-      this.handleClick();
-    }
   }
 
-  handleClick() {
+  playSound() {
     this.props.displayDrumPadPress(this.props.noteName);
     this.audio.play();
   }
@@ -236,7 +224,7 @@ class DrumPad extends React.Component {
             paddingBottom: "20%",
             fontWeight: "bold",
           }}
-          onClick={this.handleClick}
+          onClick={this.playSound}
         >
           {this.props.drumPadKey}
           <audio