Drum Machine - Don't know how to insert description into display div

JavaScript
1

Hello, I am struggling with putting a description of what sound is being played currently.

For example, I want it to say: ‘bass drum’, ‘snare’, ‘hi-hat’ and so on.

But right now it’s only saying what key is being pressed.

Here is a link to my codepen: https://codepen.io/Gamintor/pen/abpaRPQ

2

A hacky way would be something like this:

  playSound = () => {
    this.audio.current.play();
    const parent = this.audio.current.parentNode;
    parent.classList.add('active')
    const id = this.audio.current.id;
    // Find sound in the sounds array
    const {id: name} = sounds.find(sound => sound.letter === id)
    const display = parent.parentNode;
    // Use found sound name
    display.querySelector('h1').innerText = name;
  }

But the way you’ve written your code is not the way you should write React. You should leave DOM manipulation to React and don’t do document.get... everywhere.

2 Likes
3

Thank You, I will try to fix my code to make it more React like.

And can you tell me how can I set volume bar?

4

Something like this: https://codepen.io/jenovs/pen/BapGQZg?editors=0010

1 Like
5

Great, now I finally got all of the features I wanted to have.

And just to summarize, I should not use “document.get…” because it’s not React-friendly?!

So what are the alternatives to that?

6

In the code I posted you can check how volume slider is implemented. There are two places:
One is in the App where slider is a controlled component that changes volume state and passes it to the DrumPad where it is used. That is the React way.
Second one is in the keydown handler where the value is obtained using document.get.... This should be avoided in React code.

Your code, as it is written right now, has no benefit of using React. Actually it’s the other way around - it is made slower by unnecessary adding React and ReactDOM packages.

1 Like
7

Okay, Thanks for the feedback!

I am still a beginner so I have a lot to learn in order to write a proper apps;

8

This topic was automatically closed 182 days after the last reply. New replies are no longer allowed.