I’ve got the sounds working now want to display drum names. There’s a separate function for keypress and mouse click events. Both produce this error “Uncaught TypeError: setState is not function (Drum Machine)”
If I console .log the value it’s correct. Any clues appreciated. I actually had this working with just JS and a bit of jquery. Thought I’d do in React for “fun”.
The problem is when you’re using jQuery to add functions for a button click event, inside that function the this value will be the element clicked, not your App object. That is why this.setState is throwing an error.
The mixing of jQuery to handle state and actions on top of React may cause you problems.
Right now you have one giant App component. You instead might want to think about creating separate Components for the parts that make up your UI: (like the drum machine buttons and the display card) and make those children of the App component. Then you can pass around state and callbacks for modifying state using the React way of doing things.