Drum machine project

I need help I can’t get my keycode to work. Here is the link to my project:

Number one problem with your approach that each pad adds the same event listener to document - it’s not good. You App component should listen for keydown and invoke corresponding child. The proper way to do it is by using refs:

So, your App component would looks something like that:

class App extends React.Component {
  
  state = {
    display: ""
  };

  setPadRef = element => {
    this[element.props.letter.toLowerCase()] = element;
  };

  componentDidMount() {
    document.addEventListener('keydown', this.handleKeyDown);
  }
  
  handleDisplay = display => this.setState({ display });

  handleKeyDown = (e) => {
    (e.key in this) && this[e.key].handleClick();
  }
  
  render(){
    return(
      <div id="drum-machine">
        <div id="display">{this.state.display}</div>
        <div id="drum-pads">
          {data.map(d => (
            <DrumPad
              id={d.id}
              letter={d.letter}
              src={d.src}
              ref={this.setPadRef}
              handleDisplay={this.handleDisplay}
            />
        ))}
        </div>
      </div>
    );
  }
}

its not working it keeps giving me an error message and my work just disappeared.

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

When you’re declaring properties inside constructor you need to use this:

this.setPadRef = element => {
  this[element.props.letter.toLowerCase()] = element;
};

oh ok im going to give it a try.

I just did it and its still showing an error message on line 34 of my code.

When I open your codepen I see this:

constructor(props){
    super(props)
    this.state = {
      display: ""
    };
    setPadRef = element => {
      this[element.props.letter.toLowerCase()] = element;
    };
  }

And why did you remove handleClick() - you needed it for handle mouse clicks, remember?

Hey i got it working i figured out what i did wrong thanks man.

I had some fun playing with your Drum machine.