Front End Development Libraries Projects - Build a Random Quote Machine

I am doing the quote machine challenge on Codepen. My pen is at https://codepen.io/tony_the_tiger-the-typescripter/pen/jOxrOBW?editors=1111 . I was having some troubles and @kevinSmith helped me get my libraries/scripts cleaned up. Or so it seemed. I started adding things and then I started getting an error. I attempted to revert additions one by one to figure out the error and I am now all the way back to the basic template and am still getting the following error:

Function declarations should not be placed in blocks. Use a function expression or move the statement to the top of the outer function.

Your browser information:

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

Challenge: Front End Development Libraries Projects - Build a Random Quote Machine

Link to the challenge:

It seems to be working now. Is it not for you?

When I use the Analyze Javascript GUI element I get the error described above.

We’re not psychic. We have to see the code to help you.

It is still at https://codepen.io/tony_the_tiger-the-typescripter/pen/jOxrOBW?editors=1111

I don’t see that.

I do wonder about this:

{
  let database = [
    {
      // ...

Why is that in a code block?

I have added a database of the quotes for the quote machine. It is part of turning this pen into a quote machine.

I don’t understand that statement.

Oh wait, I see, it’s not actually a database (which has a very specific meaning), you are calling it “database”.

Yeah, I understood that you were hardcoding in some quotes. But my question still stands: Why is that in a code block? How do you intend to get access to that if it is in a code block and out of scope. Why are the curly braces there?

Is the meaning of code block to be wrapped in curly braces? I had wrapped it in curly braces because I thought I had to wrap what would ordinarily be Javascript code in braces because “JavaScript expressions may be embedded within JSX expressions. The embedded JavaScript expression must be wrapped in curly braces.”-CodeAcademy.com I have removed the curly braces around the array of (quote and author) objects that I refer to as database.

I may be misinterpretting the phrase code block and I do not know what “Out of scope” means in this context.

Also, how do I “run” code to test it as I update it?

Codepen automatically attempts to run your code a few seconds after an update (once you have stopped typing). I am not currently seeing any errors in the browser console, so other than the fact that you need to render the correct class, you should be on track to complete writing your app.

Is the meaning of code block to be wrapped in curly braces?

Yes.

I had wrapped it in curly braces because I thought I had to wrap what would ordinarily be Javascript code in braces because “JavaScript expressions may be embedded within JSX expressions. The embedded JavaScript expression must be wrapped in curly braces.”

Yes, but that has consequences. We don’t normally go wrapping “random” blocks of code in curly braces, just when we need to, like a function body or a code block for an if statement.

I may be misinterpretting the phrase code block and I do not know what “Out of scope” means in this context.

It means that the code can’t see the variable. When you create a code block, you create a scope. The code block can see out, but the outside can’t see in.

let foo = 'bon jour'
{
  console.log(foo)
  // bon jour
}

// ***

{
  let bar = 'howdy'
}
console.log(bar)
// Uncaught ReferenceError: bar is not defined

I have moved the JS codeblock to inside the render before the return. My code is now not able to analyze babel though. Am I headed in the right direction now?

The bable is now analyzing, but the onClick is not working (the quote is not changing).

When I click your quote, I see this in the dev console:

react-dom.production.min.js:63 Uncaught ReferenceError: newQuote is not defined
at NewQuote.handleClick

Do you see that in the browser dev tools console? If you don’t know what that is, look it up and learn about it - it’s one of the most important tools a web developer has.

  handleClick(event) {
    this.setState({
      randomIndexC: Math.floor(Math.random() * 16),
      randomIndexQ: Math.floor(Math.random() * 103),
      quote: newQuote.quote,
      author: newQuote.author
    });
  }

What is newQuote here? Also, don’t use “magic numbers” here, 16 and 103, use the length property of those arrays. That way is someone removes some quotes, it doesn’t break. And while we’re here, what do you need the event parameter for?

I thought the whole NewQuote class was a block.

It looks like there are a wide variety of views that you can set your dev tools console for. I am not seeing the error that you point out in my view and can’t figure out how to change the view to see it.

I thought the whole NewQuote class was a block.

No, it is a class.

You define a variable called newQuote in your render method, but other methods don’t have access to that. But that’s OK, you don’t need it.

You have some confusion going on. You are storing your quote in two ways.

First, you have state properties quote and author. You also have randomIndexQ which you access here:

let newQuote = possibleQuotes[this.state.randomIndexQ];

but then you never use that. That is (imho) a better way to do it. Don’t bother with quote and author on state. Just have:

    this.state = {
      randomIndexC: 0,
      randomIndexQ: 0
    };

Then use that newQuote variable in your render method.


As to the console. please figure that out. It would be like trying to learn painting while wearing very dark sunglasses. There are MOUNTAINS of information in the dev console. Keep in mind, I’m not talking about CodePen’s console, which is a reduced version, I mean the browser dev tools.

When I load up your pen, and hit the New Quote button, I get this in the dev console:

You NEED to figure out how to see that.