Front End Libraries Project

Having problems, my code for React is not working

Drum Machine

**JavaScript calculator **

Can you expand on what is going on please? ‘React is not working’ is very difficult to troubleshoot.

1 Like

I used my phone to do it, I shared the link for my code please if could use the link to check my code or maybe I don’t understand what you mean

There are a million different ways that your React code code be broken. What specific problems are you having?

1 Like

Projects from freeCodeCamp on Front End Libraries

1.Drum Machine

2.JavaScript Calculator

I shared the links in my post from codepen

What specific issues are you having with these specific projects?

1 Like

It’s not working, I tried and fixed all the bugs but I don’t know if maybe I entered something wrong or maybe because I used my phone

What exactly is not working? What are specific things that you are trying to do that are not working? Which tests are failing? What specific issues are you experiencing?

I’m not trying to be difficult. The more information you give, the more people can help you. Accurately describing problems is a key skill that helps you and others fix your code.

1 Like

Yes please Mr Jeremy I understand but my problem is I don’t know the exact problem of the code I’ve been on it for the past week, this ending week is my second week and still can’t find the problem, I recoded it couple of time but still I’m confused

If you can’t say what specific behavior is not matching what you expect, I’m sorry but I don’t know what to help with.

1 Like

Thanks Mr Jeremy for your time

Taking a look at the drum machine, I find it hard to follow because you are not formatting well - this makes code hard to read. When I plug your code into a formatter like this, it throws an error for:

  134 |        this.state = {
> 135 |          padStyle: inactiveStyle;
      |                                 ^
  136 | };

When I fix that, back in codepen, I get this:

pen.js:213 Uncaught TypeError: Cannot read property ‘map’ of undefined

in the browser console. One way to fix that is optional chaining so:

      padBank = this.props.currentPadBank?.map((drumObj, i, padBankArr) => {

Now the app runs without error, but this.props.currentPadBank is undefined in PadBank. This is because in App, you are rendering this:

        <PadBank
          clipVolume={this.state.sliderVal}
          currentPadBank={this.state.currentPadBank}
          power={this.state.power}
          updateDisplay={this.displayClipName}
        />

So you are passing in currentPadBank={this.state.currentPadBank}, but there is no such property on the state of that component. When I fix that, I get some on the screen. Once you fix that, you probably won’t need the optional chaining we added.

But Jeremy is 100% right - the more specific the question, the better answers you will get, both in quantity and quality.

3 Likes

Thanks you all I appreciate it @kevinSmith I followed your steps and it worked for me :pray:t2:

1 Like