Drum machine need small help

1

https://codepen.io/Moiseychek/pen/pXKWry

so here my skeleton.

my next step is to make a drumPad changing color, on click!
got a stuck on that one,
could anyone assit with solution?

2

Event handlers (like the play method) can accept an event parameter. That parameter contains information about the event (for example, the location of the click on the screen); in particular, it contains the element that fired that event (also called the target). Instead of the fixed '#drumPad' string, you can use the target. Then you can pass the same method as event handlers for the different divs.

play(event) {
  $(event.target).css('background-color', 'black');
}

...

render() {
  ...
  <div onClick={this.play} ...>
  <div onClick={this.play} ...>
  ...
}

Of course the code will permanently set the divs to black. That’s probably not what you intend.

Also you might want to be careful with using jQuery in React. React wouldn’t know if you modified the DOM using jQuery, and your page could break. Here you’re just changing the styles, so I guess it’s fine.

1 Like
3

Alright AlrighT! Thank you very much kevcomedia! cat!