Undefined props in keydown function (react drum machine)

I’m almost done with the FE Libraries Drum Machine project, but my code isn’t recognizing the props i’m passing as arguments to the handleKeyDown function, seeing any props I passed into handleClick without issue as undefined. Code is as follows:

App.js

componentDidMount() {
    document.addEventListener("keydown", this.handleKeyDown);
  }

  componentWillUnmount() {
    document.removeEventListener("keydown", this.handleKeyDown);
  }

  handleKeyDown = (e, src) => {
    console.log(src);
  };

  handleClick = (name, src) => {
    this.setState({ display: name });
    new Audio(src).play();
  };
 <Button
              handleClick={this.handleClick}
              handleKeyDown={this.handleKeyDown}
              display={this.state.display}
              name={button.name}
              key={button.key}
              id={button.key}
              src={button.src}
              tabIndex="0"
            />

and Button.js:

const Button = ({ handleClick, handleKeyDown, name, id, src }) => {
  return (
    <div
      onClick={() => handleClick(name, src)}
      onKeyDown={e => handleKeyDown(e, src)}
      className="drum-pad"
    >
      {id}
      <audio className="clip" id={id} data={src} />
    </div>
  );
};

Would you mind posting link to your code on a site like Codepen or sandbox? It is hard to test without all the code.

1 Like

what @RandellDawson said, plus also try putting tabIndex="0" in your div as an attribute and see if it makes a difference.

1 Like

Github repo is here, adding tabIndex=“0” to the div itself doesn’t do anything.

You have defined onkeydown listener in componentDidMount. That’s what gets called. An as you see it has no second argument.

Ah, I see, forgetting the function signature is what bit me here, now I’m seeing expected behavior. Thanks jenovs, your input has been really helpful to me on this project!