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

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

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.

@linaquintero The following lines are a problem:

const randomQuote = possibleQuotes.quote[this.state.randomIndex];
const randomAuthor = possibleQuotes.author[this.state.randomIndex];

possibleQuotes is an array. You access an array by its index. You are trying to access a quote and author property on the array, but instead you should be access a quote and author property of an element of the possibleQuotes array. Once you fix this small (yet significant) problem, you will pass all the tests.

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!

const randomQuote = possibleQuotes[this.state.randomIndex][quote];

You should be looking at the browser’s console to see the error messages. The current error message indicates quote is not defined. You are receiving this message because you have put quote inside the [ and ]. Doing this assumes that quote is a variable.
However, quote is a property of the object (the element of possibleQuotes array with index of this.state.randomIndex. I suggest you review the following challenges to help you figure out how to best reference the quote property of the object.

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

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

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: