# React quote machine **URL:** \ **Category:** I Built This\ **Created:** [April 1, 2019, 4:42pm UTC](https://forum.freecodecamp.org/t/react-quote-machine/268615 "2019-04-01T16:42:57Z")\ **Posts on this page:** 10\ **Page:** 1
**Author:** ![bmansk8](https://sea3.discourse-cdn.com/freecodecamp/user_avatar/forum.freecodecamp.org/bmansk8/32/83380_2.png) [@bmansk8](https://forum.freecodecamp.org/u/bmansk8)\ **Post date:** [April 1, 2019, 4:42pm UTC](https://forum.freecodecamp.org/t/react-quote-machine/268615/1 "2019-04-01T16:42:57Z")
> **[random quote machine v.2](https://codepen.io/bmansk14/pen/NmPgXE)** > > ... 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. ---
**Author:** ![bmansk8](https://sea3.discourse-cdn.com/freecodecamp/user_avatar/forum.freecodecamp.org/bmansk8/32/83380_2.png) [@bmansk8](https://forum.freecodecamp.org/u/bmansk8)\ **Post date:** [April 1, 2019, 5:16pm UTC](https://forum.freecodecamp.org/t/react-quote-machine/268615/3 "2019-04-01T17:16:59Z")
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. ---
**Author:** ![shimphillip](https://sea3.discourse-cdn.com/freecodecamp/user_avatar/forum.freecodecamp.org/shimphillip/32/158663_2.png) [@shimphillip](https://forum.freecodecamp.org/u/shimphillip)\ **Post date:** [April 1, 2019, 6:33pm UTC](https://forum.freecodecamp.org/t/react-quote-machine/268615/4 "2019-04-01T18:33:33Z")
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. ---
**Author:** ![bmansk8](https://sea3.discourse-cdn.com/freecodecamp/user_avatar/forum.freecodecamp.org/bmansk8/32/83380_2.png) [@bmansk8](https://forum.freecodecamp.org/u/bmansk8)\ **Post date:** [April 2, 2019, 2:56pm UTC](https://forum.freecodecamp.org/t/react-quote-machine/268615/5 "2019-04-02T14:56:33Z")
Hi! So i came up with this ```auto 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? ---
**Author:** ![shimphillip](https://sea3.discourse-cdn.com/freecodecamp/user_avatar/forum.freecodecamp.org/shimphillip/32/158663_2.png) [@shimphillip](https://forum.freecodecamp.org/u/shimphillip)\ **Post date:** [April 2, 2019, 3:07pm UTC](https://forum.freecodecamp.org/t/react-quote-machine/268615/6 "2019-04-02T15:07:42Z")
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. ---
**Author:** ![bmansk8](https://sea3.discourse-cdn.com/freecodecamp/user_avatar/forum.freecodecamp.org/bmansk8/32/83380_2.png) [@bmansk8](https://forum.freecodecamp.org/u/bmansk8)\ **Post date:** [April 2, 2019, 3:28pm UTC](https://forum.freecodecamp.org/t/react-quote-machine/268615/7 "2019-04-02T15:28:00Z")
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. ```auto 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 }); } ``` ---
**Author:** ![shimphillip](https://sea3.discourse-cdn.com/freecodecamp/user_avatar/forum.freecodecamp.org/shimphillip/32/158663_2.png) [@shimphillip](https://forum.freecodecamp.org/u/shimphillip)\ **Post date:** [April 2, 2019, 3:31pm UTC](https://forum.freecodecamp.org/t/react-quote-machine/268615/8 "2019-04-02T15:31:22Z")
Yes, still store your quotes in the state. Make sure to use `setState()` method to update the state. ---
**Author:** ![Anon551122](https://avatars.discourse-cdn.com/v4/letter/a/3ab097/32.png) [@Anon551122](https://forum.freecodecamp.org/u/Anon551122)\ **Post date:** [April 2, 2019, 3:38pm UTC](https://forum.freecodecamp.org/t/react-quote-machine/268615/9 "2019-04-02T15:38:47Z")
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. ```auto 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: ```auto chooseQuote() { let results=this.state.tonOfQuotesArray[Math.floor(Math.random() * parsedJSON.quotes.length)]; this.setState({ Author:results.author, Quote: results.quote } ``` ---
**Author:** ![bmansk8](https://sea3.discourse-cdn.com/freecodecamp/user_avatar/forum.freecodecamp.org/bmansk8/32/83380_2.png) [@bmansk8](https://forum.freecodecamp.org/u/bmansk8)\ **Post date:** [April 2, 2019, 3:55pm UTC](https://forum.freecodecamp.org/t/react-quote-machine/268615/10 "2019-04-02T15:55:58Z")
ok so here is a link to my codepen maybe this will help. The old link points to a older verison. > **[random quote machine v.3](https://codepen.io/bmansk14/pen/mgJKrZ?editors=0110)** > > Just a random quote generator using react and bootstrap 4.... ---
**Author:** ![ILM](https://sea3.discourse-cdn.com/freecodecamp/user_avatar/forum.freecodecamp.org/ilm/32/363239_2.png) [@ILM](https://forum.freecodecamp.org/u/ILM)\ **Post date:** [January 17, 2021, 7:47pm UTC](https://forum.freecodecamp.org/t/react-quote-machine/268615/11 "2021-01-17T19:47:42Z")
Closed on January 17, 2021, 7:47pm UTC