Tell us what’s happening:
I’m working on the drum-machine project for the Front End Libraries Projects and I’m having trouble getting my drum pads to appear in the browser. I’m working locally in react. Any help would be greatly appreciated .
Your code so far
This is the repo with my code so far:
Your browser information:
User Agent is: Mozilla/5.0 (Macintosh; Intel Mac OS X 11_2_1) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/88.0.4324.192 Safari/537.36.
Not sure how you are doing this, but in order to get your code to run on my computer I had to create both a src and public sub directory and move index.html into public and all the css/js files into src before I could get npm start to run.
Regardless, your first issue is this line in App.js:
Object.keys(Sounds).map(s => (
What data type is Sounds? What data type does the map method belong to? If this still isn’t clear, add the following to render() before the return statement:
console.log(Object.keys(Sounds));
Next hint, compare the names of the props you are passing to DrumPad in App.js with the names of the props you are using to render in DrumPad.js.
.