Drum machine project

1

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

2

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

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

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

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

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

oh ok im going to give it a try.

6

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

7

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?

8

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

9

I had some fun playing with your Drum machine.