Random quote number issue - Random Quote Machine with REACT

JavaScript
1

Hi, there!
I’m almost done with the “Random Quote Machine” project.
Everything is working except for a little problem.
Quote, and author are not the same! I know that’s because I’m generating two different index numbers but I haven’t figured it out how to fix the problem.
Can somebody help? Thanks!

Here’s the code…

class MyRandomQuote extends React.Component {
  constructor(props){
    super(props);
    this.state = {
      author: '',
      quote: '',
      twitter: ''
    }
    this.fetchquote = this.fetchquote.bind(this)
  }
  componentDidMount(){
    this.fetchquote()
  }
  
  fetchquote(){
    fetch('https://gist.githubusercontent.com/camperbot/5a022b72e96c4c9585c32bf6a75f62d9/raw/e3c6895ce42069f0ee7e991229064f167fe8ccdc/quotes.json')
    .then(response => response.json())
    .then(parsedJSON => this.setState({
     author: parsedJSON.quotes[Math.floor(Math.random() * parsedJSON.quotes.length)].author,
      quote: parsedJSON.quotes[Math.floor(Math.random() * parsedJSON.quotes.length)].quote,
      twitter: 'http://twitter.com/intent/tweet?hashtags=quotes&text='
      }))
  }
  render(){
    const twitter = this.state.twitter + '"' + this.state.quote + '" ' + this.state.author
    return(
      <div id='quote-box' class='container-fluid'>
        <h1>Random Quote Machine</h1>
        <p>{ this.state.random}</p>
        <p id="text">{this.state.quote}</p>
        <div id="author">{this.state.author}</div>
        <button 
          class="btn-info" 
          id="new-quote" 
          onClick={this.fetchquote}>New entry</button>
        <button class="btn-default">
          <a 
            id="tweet-quote" 
            href={ twitter } 
            target="_blank">Tweet this!</a>
        </button>
      </div>
    );
  }
}

ReactDOM.render(<MyRandomQuote/>, document.getElementById('app'));
2

Hi, I can think of 2 ways to do that:

  fetchquote(){
    fetch('https://gist.githubusercontent.com/camperbot/5a022b72e96c4c9585c32bf6a75f62d9/raw/e3c6895ce42069f0ee7e991229064f167fe8ccdc/quotes.json')
    .then(response => response.json())
    .then(parsedJSON => {
		let results = parsedJSON.quotes[Math.floor(Math.random() * parsedJSON.quotes.length)];
		this.setState({
			author: results.author,
			quote: results.quote,
			twitter: 'http://twitter.com/intent/tweet?hashtags=quotes&text='
		});
	  });
  }
  1. Use a function inside setState
 fetchquote(){
   fetch('https://gist.githubusercontent.com/camperbot/5a022b72e96c4c9585c32bf6a75f62d9/raw/e3c6895ce42069f0ee7e991229064f167fe8ccdc/quotes.json')
   .then(response => response.json())
   .then(parsedJSON => this.setState(() => {
   	let results = parsedJSON.quotes[Math.floor(Math.random() * parsedJSON.quotes.length)];
   	return {
   		author: results.author,
   		quote: results.quote,
   		twitter: 'http://twitter.com/intent/tweet?hashtags=quotes&text='
   	};
   }));
 }

I haven’t tried running these 2, so I cannot guarantee they’re working :stuck_out_tongue:

3

Thanks! I tried the first solution and it worked. :slight_smile:

1 Like