What the white-huh?

1

Hey guys. Can anyone tell me why the text is white at the bottom of my Drum Machine? I have a feeling that whatever this problem is, it’s whatever is keeping me from seeing my work as I ought to. Thanks in advance.

2

Do you have a working version of the app? The one to which you’ve linked is incomplete and not a functioning app.

3

I’m gonna say no. The reason I put this here is because it’s not functioning. I’d like to know why. :grimacing:

4

Is it perhaps the syntax in your .render function call?

5

How do I tell? My console gives no errors.

6

  1. You have to move the Box component definition up before the App component.

  2. You did not close the #drum-machine div correctly.

  3. You are missing the opening bracket < in the render for the App component.

edit: not sure if you are editing the project right now, but you are also now missing the HTML that React needs to mount the component to, i.e. an element with the app id.

1 Like
7

Oops. I really made a mess it seems. :crazy_face: Thanks for looking at this.

8

You were asking about text. I couldn’t even get text. Base on what I was linked to, it would be like pointing to a car without wheels or an engine and asking why it shakes when it gets over 67mph. I don’t understand the question because the app to which you pointed me didn’t do anything. There was not text at all, let alone white text.

But yes, follow lasjorg’s advice. I’d also add that, especially when learning, don’t get ahead of yourself. Get the simplest thing that works. Make small changes and test, If something stops working, back up. It just seems odd to me that you were building out the drum machine when you didn’t have even a “hello world” level of the app working.

You could achieve that with the html:

<!-- <script src="https://cdn.freecodecamp.org/testable-projects-fcc/v1/bundle.js"></script> -->
<div id='app'></div>

and JS:

const App = () => <p>Howdy!</p>;

ReactDOM.render(<App />, document.getElementById('app'));

Start with something simple that works and gradually add on complexity, testing as you go. If something stops working, you know it was something you did in your last step.

1 Like
9

Thank you for your help everyone, I’ll continue with my project on Monday.

10

Hey guys, thank you for your help. I came back today, looked at everything, figured out my silly mistakes with your guidance and am now moving on.

1 Like