Undefined props in keydown function (react drum machine)

JavaScript
1

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>
  );
};
3

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

1 Like
4

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

5

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

6

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!