Build a Random Quote Machine - Please help me to review what is wrong

JavaScript
1

Tell us what’s happening:
Nothing shows up, please help me to figure it what I’m missing?

Your code so far
https://codepen.io/linataaffe/pen/YzzwvmJ

Your browser information:

User Agent is: Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/77.0.3865.90 Safari/537.36.

Link to the challenge:
https://learn.freecodecamp.org/front-end-libraries/front-end-libraries-projects/build-a-random-quote-machine

2

Hi,

The first thing you should do when having issues like this is open the console and see if there are any errors.

In this case, the first error I see is:
“failed to load resource: net::ERR_BLOCKED_BY_CLIENT”

The next thing I would do in your shoes is to try and debug this error. If you resolve that error and still have other errors then repeat the process :slight_smile:

GL

hint: look at the “Cannot read property ‘0’ of undefined” errors. If you solve that then it should work.

4

Thank you so much for your explanation on how to access properties on the array. I think I have fixed the issue with the array, but I still can’t figure out why is not loading? Is there anything else wrong on the code? Now is showing a different error, would you please help me figure this out? See below my code:

https://codepen.io/linataaffe/pen/YzzwvmJ

Thank you!

6

I’m also a beginner so take my advice with a grain of salt but

$( document ).ready(function() {
class App extends React.Component {

Why do you have the opening line for Jquery and react? You’re only using react in the rest of your code.
Again, grain of salt this could not be an issue

7

Thank you so much for all your help! Looks like I finally figure it out, and I passed most of the test except one, which I don’t get because every time I click the “new Quote” button, I get the new quote and author to change, but I don’t know why the system still doesn’t let me pass that part, here is the message I get when I run the test:

 My quote machine should fetch the new quote's author when the #new-quote button is clicked and display it in the #author element.
Timeout of 15000ms exceeded. For async tests and hooks, ensure "done()" is called; if returning a Promise, ensure it resolves.
Error: Timeout of 15000ms exceeded. For async tests and hooks, ensure "done()" is called; if returning a Promise, ensure it resolves.
    at i.p._timeoutError (https://cdn.freecodecamp.org/testable-projects-fcc/v1/bundle.js:598:36139)
    at https://cdn.freecodecamp.org/testable-projects-fcc/v1/bundle.js:598:34258
8

I adjusted few things on the design, and that last error fixed itself, I don’t even know how. If you can provide a little bit more explanation for future reference that will be greatly appreciated. Thanks a lot, I’m ready to move on to the next project :slight_smile: