Build a Drum Machine - my app is blank

JavaScript
1

Tell us what’s happening:

My app is not rendering, I only get a blank page without any working components.
I do not see any meaningful errors on the console of my browser.
Some paragraph components that I wrote to test the app do render but the real components that should do something do not render.
I have been made aware of other issues with my code but if i can’t see my app I can’t debug it.
Thanks in advance for any help.

Your code so far

Your browser information:

User Agent is: Mozilla/5.0 (Windows NT 10.0; Win64; x64; rv:130.0) Gecko/20100101 Firefox/130.0

Challenge Information:

Front End Development Libraries Projects - Build a Drum Machine

2

hello and welcome back to fcc forum :slight_smile:

try this for rendering

React.render(<App />, document.getElementById('root'));

happy coding :slight_smile:

3

Using that line I get the error:

TypeError: (intermediate value).render is not a function
4

you need to add react library into your codebase in codepen? you can check that from “js setting” in codepen project, happy coding :slight_smile:

5

You have a bunch of errors.

I think you have to spend a little more time on learning React first. You can’t just brute force it through example code. You also have errors that are unrelated to React (like variable scope). React is, even with all its “Magic”, just JavaScript.

The React docs has a good tutorial I would suggest you go through.

  1. Your components should be PascalCase (e.g., ActionButton)

  2. You are not using props correctly in most of your components. E.g., Machine is declared in App but used in ActionButton without being passed as a prop, and so is Bank.

  3. You are using undeclared variables. In ActionButton you use the Audio constructor and save to music but then you use audio instead for the volume. Besides, you can’t use the Audio constructor with this project, it has to use audio elements because of how it is tested.

  4. You have block scoped music so you can’t use it outside the block.

  5. this.state.Bank is for class components which you do not have.

  6. You should use a map for your buttons instead of repeating the same code.

  7. Declare static data outside the components. There is no reason for it to be redeclared on every render.

I’m sure there is more.

1 Like
6

Thanks for the list, it’s a starting point to fix things little by little, I will give each point its fair share of time.
And I am sorry, I had to take a break between this project and the markdown previewer and seems that hindered me more than I imagined.