Drum machine - feeling stuck - solved

JavaScript
1

Tell us what’s happening:

Hello, happy campers! I have tried to create the Drum Machine project. In fact, I did try once with a whole bunch of code and jQuery, and it worked just decently.
Then I have decided to try out React and after I troubleshooted all the syntax errors, the only error I get in the CodePen console is ‘[Error object] {}’. I am really not sure what was done wrong, as I checked every inch of the code.

Your code so far

https://codepen.io/Karajna/pen/bGwdPyV
Your browser information:

User Agent is: Mozilla/5.0 (Macintosh; Intel Mac OS X 10_15_7) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/87.0.4280.88 Safari/537.36.

Challenge: Build a Drum Machine

Link to the challenge:

2

Use the development build of react to get better error messages in the console:

https://unpkg.com/react@17/umd/react.development.js
https://unpkg.com/react-dom@17/umd/react-dom.development.js

Once you switch to those you will see exactly what the error is and I think you’ll be able to fix it.

1 Like
3

thank you very much. I will try it right away and will give you an update ASAP!

4

I’ve got to admit that yesterday I spent the evening trying to understand my problem, as the packages you’ve shared with me gave indeed a bit more detailed explanation of the issues. Evidently there is a problem with the Sounds component, one div and my App. However, after reading React documentation I did not move any further unfortunately :frowning:

5

Did you have the developer tools open so you could see the JS console? If so, what error messages were you getting?

6

I got the following error:
"The above error occurred in the component:

at Sounds (https://cdpn.io/cp/internal/boomboom/pen.js?key=pen.js-fef2e954-cf88-5da6-b73c-de0409854184:95:1)
at div
at App (https://cdpn.io/cp/internal/boomboom/pen.js?key=pen.js-fef2e954-cf88-5da6-b73c-de0409854184:114:5)

Consider adding an error boundary to your tree to customize error handling behavior.
Visit https://reactjs.org/link/error-boundaries to learn more about error boundaries."

7

I would suggest you use Codesandbox for React. It gives you much better error handling and is more like working in a local dev environment.

Maybe revisit the docs on map and read an article on React lists.


8

thank you… I will read both and will figure out the Codesandbox!

9

You’ve still got the production react libraries in your JS settings. Remove those. You just want the dev ones I gave you. Once you do that you will get some error messages that will tell you exactly what the issue is.

10

thanks a lot for your help, I did not pay attention well when you mentioned I needed to delete all the prod libraries. I did remove them and did some reading.

I’d like to thank you for your help, it took me a few hours but I revisited a lot of topics from mapping an array in React to the basics like Child and parent components. Thanks again it works out for me!

11