React quote machine

Hi!
Here is my random quote machine using react and bootstrap 4. I did not use Redux cause
it seamed like overkill for such a small project. Note I ripped the JSON call from the web but
I get the idea behind it. Mainly that I receive a random quote and author and set my
state based on that. Any tips on the react side would be awesome! The CSS is very basic
because I wanted to focus on the react side since I just finished the front end libraries course.

Since you a fetching the same JSON each time and then randomly selecting one of the quotes in it to display, it would make more sense to only fetch the JSON one time (when the page opens) and store the quotes in state. Then, you just randomly a quote from state and display it. This is much more efficient and saves bandwidth.

1 Like

Hi! So I really like your idea but I know very little about json. Could you show me some sudo code that does that? Not currently at my pc right now btw.

You can fetch the JSON on componentDidMount once.

Then whenever new quote button is simply run your code that randomly grabs a quote from the array.

Hi! So i came up with this

componentDidMount(){
    
   var quotesArr = [];

fetch('https://gist.githubusercontent.com/camperbot/5a022b72e96c4c9585c32bf6a75f62d9/raw/e3c6895ce42069f0ee7e991229064f167fe8ccdc/quotes.json')
    .then(response => response.json())
    .then(parsedJSON =>{
       quotesArr = parsedJSON;     
    });
    
    this.fetchquote();
  }
  
  fetchquote(){
    var i = Math.floor(Math.random() * quotesArr.length);
    this.setState({
      Author: quotesArr[i].author,
      Quote: quotesArr[i].quote
    });
  }

But I know this doesn’t work. So i’m storing a object full of objects in the quotesArr right?
So the fetchquote function needs to be fixed correct? Any help is welcome.

EDIT: is there a way to take apart the object that the json gives me so its a array full of objects instead of a array with a object full of objects inside?

First, I wouldn’t store fetched quotes into a local variable quotesArr. I would set it in the state.

Take a look at the returned object though. It returns an array as the first key. You can simply go down one level to grab the ‘quotes’ key and store it inside quotesArr.

So I save all the json objects in fetchedQuotes and that is in my state. Then pick a random number to be my quote. Then go to that spot in my fetchedQuotes array and use dot notation to get the information i’m looking for. So am I still storing a array of objects in my fetchedQuotes array? I looked at what the json is sending me and my seems like this should work. Sorry if i’m wasting your time as I said before I ripped the original json call off the web and I personally haven’t used json really at all.

class RandomQuote extends React.Component{
  constructor(props){
    super(props);
    this.state={
      Author:'',
      Quote:'',
      Twitter:'',
      fetchedQuotes: []
    }
    this.fetchquote = this.fetchquote.bind(this)
  }
  
  componentDidMount(){   
     
fetch('https://gist.githubusercontent.com/camperbot/5a022b72e96c4c9585c32bf6a75f62d9/raw/e3c6895ce42069f0ee7e991229064f167fe8ccdc/quotes.json')
    .then(response => response.json())
    .then(parsedJSON =>{
      fetchedQuotes = parsedJSON.quotes;     
    });
    
    this.fetchquote();
  }
  
  fetchquote(){
    var i = Math.floor(Math.random() * fetchedQuotes.length);
    this.setState({
      Author: fetchedQuotes[i].author,
      Quote: fetchedQuotes[i].quote
    });
  }

Yes, still store your quotes in the state.

Make sure to use setState() method to update the state.

The idea is to store your result from your fetch request as a state. And then use that state (which is full of quotes) to generate quotes, rather than using the fetch request over and over again.

 componentDidMount(){   
     
fetch('https://gist.githubusercontent.com/camperbot/5a022b72e96c4c9585c32bf6a75f62d9/raw/e3c6895ce42069f0ee7e991229064f167fe8ccdc/quotes.json')
    .then(response => response.json())
    .then(parsedJSON =>{
      fetchedQuotes = parsedJSON.quotes;     
    });

//-----------------------add this line-------------------------///
this.setState({tonOfQuotesArray: fetchedQuotes)}
    
    this.fetchquote();
  }

fetchQuote() {
  //randomly chooses a quote from this.state.tonOfQuotesArray
 //stores it in a state like 
      Author:'',
      Quote:'',
      Twitter:'',
}

Then when you click the ‘new quote’ button, instead of calling fetchquote() again, you can make a new function like:

chooseQuote() {
let results=this.state.tonOfQuotesArray[Math.floor(Math.random() * parsedJSON.quotes.length)];
this.setState({
        Author:results.author,
        Quote: results.quote
}

ok so here is a link to my codepen
maybe this will help. The old link points to a older verison.