Random Quote Machine: why can't I read my object's properties?

Random Quote Machine: why can't I read my object's properties?
0

#1

Tell us what’s happening:
I’m building my Random Quote Machine using create-react-app. After I create the const newQuote in my render section, I can type console.log(newQuote) to affirm that I have generated a random quote from my array of objects. When I try to access any of newQuote’s properties, however, I get an error. So if I write console.log(newQuote.quote). for example, my localhost window gives the following message:

“TypeError: Cannot read property ‘quote’ of undefined”

I’ve confirmed using typeof that the variable newQuote is an object, and the object has (or should have) properties quote and author. But I can’t manage to do anything with these properties without getting an error message. Any insights on why would be most helpful. Thanks!

Here is what I have so far:

Your code so far

<code>import React, { Component } from 'react';
import logo from './logo.svg';
import './quotes.scss';

class RandomQuoteMachine extends React.Component {
    constructor(props) {
    super(props);
    this.state = {
      randomIndex: ''
    }
    this.handleClick = this.handleClick.bind(this);
  }

handleClick(event) {
    this.setState({
      randomIndex: Math.floor(Math.random() * 20),
      });
  }

  render() {
    const quotes = [
      {quote: "As you wish.", author: "Westley"},
      {quote: "This is true love. You think this happens every day?", author: "Westley"},
      {quote: "Death cannot stop true love. All it can do is delay it for a little while.", author: "Westley"},
      {quote: "Inconceivable!", author: "Vizzini"},
      {quote: "He's moving awfully fast. I wonder if he's using the same wind as us.", author: "Inigo Montoya"},
      {quote: "You keep using that word. I do not think it means what you think it means.", author: "Inigo Montoya"},
      {quote: "Hello. My name is Inigo Montoya. You killed my father. Prepare to die.", author: "Inigo Montoya"},
      {quote: "You've been mostly dead all day.", author: "Fezzik"},
      {quote: "I think everything is a trap. That's why I'm still alive.", author: "Prince Humperdinck"},
      {quote: "I've got my  country's 500th anniversary to plan, my wedding to arrange, my wife to murder, and Guilder to frame for it. I'm swamped", author: "Prince Humperdinck"},
      {quote: "Never go in against a Sicilian when death is on the line!", author: "Vizzini"},
      {quote: "Plato, Aristotle, Socrates? Morons!", author: "Vizzini"},
      {quote: "Life is pain. Anyone who says differently is selling something.", author: "Man in Black"},
      {quote: "Rodents of Unusual Size? I don't think they exist.", author: "Westley"},
      {quote: "I'm not a witch, I'm your wife!", author: "Valerie"},
      {quote: "Have fun storming the castle!", author: "Miracle Max"},
      {quote: "Mawwage, that bwessed awwangement, that dweam wifin a dweam.", author: "Impressive Clergyman"},
      {quote: "Yes you're very smart, now shut up.", author: "Grandpa"},
      {quote: "I've just sucked one year of your life away...what did this do to you? Tell me. And be remember, this is for posterity, so be honest: how do you feel?", author: "Count Rugen"},
      {quote: "I died that day. And you can die too, for all I care.", author: "Buttercup"}
  ];   
const newQuote = quotes[this.state.randomIndex];
  
    return (
      <div id="wrapper">
      <div id="quote-box">
        <div className="quote-text">
          <i className="fa fa-quote-left"><span id="text" /></i>{newQuote.quote}<i className="fa fa-quote-right"></i> 
        </div>
        <div className="quote-author">
          -{newQuote.author}<span id="author"></span>
        </div>
        <div className="buttons">
          <a className="button" id="tweet-quote" href="twitter.com/intent/tweet" title="Tweet this quote!" target="_blank">        
            <i className="fa fa-twitter"></i></a>
          <button className="button" id="new-quote" onClick={this.handleClick}>New quote</button>
        </div>
      </div>
      <div className="footer"> <em>by <a href="https://github.com/stefanhk31">stefanhk31</a></em></div>
    </div>
    );
  }
}
export default RandomQuoteMachine;
</code>

Your browser information:

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

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


#2

I’ve edited your post for readability. When you enter a code block into a forum post, please precede it with a separate line of three backticks and follow it with a separate line of three backticks to make easier to read.

See this post to find the backtick on your keyboard. The “preformatted text” tool in the editor (</>) will also add backticks around text.

Note: Backticks are not single quotes.


#3

randomIndex should be 0.
Otherwise you can’t get the value


#5

Ah, that makes sense. Thanks!


#6

Sorry about that. I thought that I got it all formatted correctly. Will use the backticks in future.