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
