How to make display change in my code - Build a Drum Machine challenge

JavaScript
#1

I’m trying to insert the following into my code but it just doesn’t work, the display doesn’t change when I clikc the Q button for example: User Story #7: When a .drum-pad is triggered, a string describing the associated audio clip is displayed as the inner text of the #display element (each string must be unique).

This is my code: https://codepen.io/JGGB/pen/gOmvmQZ?editors=1010

I am trying to do it the same way as this guy does it (adapted to my code, which I understand, his on the other hand is too complex for me right now as he uses things like .map, I’ll try that later): youtube " Drum Machine React Tutorial - Part 3" (starts at 2:10)

Your browser information:
Chrome

Challenge: Build a Drum Machine

Link to the challenge:

#2

You are not connecting your App component to QButton and other button components. You pass the App component’s handleDisplay method to button components as a property, and in each of your button components, you call the App’s handleDisplay from their handleClick and handleKeyDown methods.

I guess the map method is used to create multiple button components from one Button class. You have separate QButton, WButton, etc button classes but you really should have just one Button class and create nine Button instances.

#3

Hi twotani,

Thanks for your response

In the end all I needed was some understanding of props and where you must place them in order for everything to work. I found this link very useful in case someone in the future gets stuck in the same situation as me: https://reactjs.org/docs/components-and-props.html

Thanks for your time

Jaime