CODEWITHSUNDEEP
javascriptreactjs
Pegasus18
Pegasus18

Reputation: 300

FCC Drum Machine - Passing tests but keydown event not firing for me

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

import React from "react";
import { data } from "./sounds";

export default function Key(props) {
  const soundId = props.soundId;

  const play = () => {
    document.getElementById(props.id).play();
    console.log(`'Clicked:' ${props.id}`);
  };

  const displayData = props.displayData;

  const handleClick = () => {
    play();
    displayData(props.id);
  };

  return (
    <div className="buttonContainer" >
      <button id="button" className="drum-pad" onClick={handleClick} onKeyDown={handleClick}>
        <audio
          src={data[soundId].url}
          type="audio/mp3"
          className="clip"
          id={props.id}
        />
        {props.id.toUpperCase()}
      </button>
    </div>
  );
}

App component

import React, { useState } from "react";
import Key from "./Key";

import "./styles.css";

export default function App() {
  const [displayData, setDisplayData] = useState();

  const handleDisplay = input => {
    setDisplayData(input);
    setTimeout(() => {
      setDisplayData();
    }, 500);
  };

  return (
    <div className="App">
      <div id="drum-machine">
        <p id="display">{displayData}</p>
        <Key id={"Q"} soundId={0} charCode={81} displayData={handleDisplay} />
        <Key id={"W"} soundId={1} charCode={87} displayData={handleDisplay} />
        <Key id={"E"} soundId={2} charCode={69} displayData={handleDisplay} />
        <Key id={"A"} soundId={3} charCode={65} displayData={handleDisplay} />
        <Key id={"S"} soundId={4} charCode={83} displayData={handleDisplay} />
        <Key id={"D"} soundId={5} charCode={68} displayData={handleDisplay} />
        <Key id={"Z"} soundId={6} charCode={90} displayData={handleDisplay} />
        <Key id={"X"} soundId={7} charCode={88} displayData={handleDisplay} />
        <Key id={"C"} soundId={8} charCode={87} displayData={handleDisplay} />
      </div>
    </div>
  );
}

Codesandboxlink: https://codesandbox.io/s/fcc-drum-kit-dz81w

Upvotes: 0

Views: 146

Answers (1)

Naphtali Duniya
Naphtali Duniya

Reputation: 134

You need to tell the browser to listen to an onKeydown event after the page has rendered, using the componentDidMount()

componentDidMount() {
    document.addEventListener("onKeydown", this.handleKeyPress);
  }

  componentWillUnmount() {
    document.removeEventListener("onKeydown", this.handleKeyPress);
  }

Or change your button event to onKeydown() event, lowercase d

Upvotes: 1

Related Questions