Random Quote Machine - Timeout Issues?

Code Feedback
1

I’m working through the Random Quote Machine project and I have it at a point where it sometimes passes all the tests, and sometimes it doesn’t. I attempted to create the project using a combination of React and Bootstrap, since I wanted to gain more practical experience using both.

Right now, I only have three quotes loaded into a variable - array containing three objects. The tests that most often get caught are #8 and #9 - “when the #new-quote button is clicked, my quote machine should fetch a new quote/ author and display it in the #text/ #author element.” Also worth noting is that sometimes the tests run quick, while others it seems to churn for a bit.

I’m not sure if this is because of how I’m using React, the efficiency of my newQuote() function, or something else entirely. Any help and/ or feedback is greatly appreciated.

Once I get consistent passes, my next step will be to use a JSON file to pull from a larger quote pool.

My codepen is here: https://codepen.io/bloo0178/pen/YOKYNj

4

Thanks for taking a thorough look through my code - much appreciated! I ended up pulling all the Redux code I had commented out, as well as the Redux libraries. I started off wanting to use Redux for this project, but found I was over-complicating my solution to a fault.

I also implemented your other suggestions. The tests I mentioned still fail randomly - like you said, I think it’s a bug with the test scripts - but the code is certainly much easier to digest. I particularly appreciate your feedback on using SFC’s. That made that particular concept click with me finally.

For others viewing this, my QuoteBox constructor previously included the following code (the handleClick contained similar code, but contained within this.setState):

let randomQuote = newQuote();
    this.state = {
      quote: randomQuote.quote,
      author: randomQuote.author
    }

Also, for the benefit of others viewing this, my QuoteContent component was previously set up with a constructor similar to the main QuoteBox. Modifying it to the code Randell provided changed it into a stateless functional component, which served the purpose of what I intended it for perfectly.