Hi everybody. Currently I’m working on my Random Quote Machine Project from the Front End Libraries section. The instructions can be found here:
https://learn.freecodecamp.org/front-end-libraries/front-end-libraries-projects/build-a-random-quote-machine
And my current attempt (with no CSS yet!) can be found here:
So the first problem I’m having is within the part of the code that is currently commented out. What I want that part of the code to do is ensure that every quote gets displayed before there’s a repeat. When I uncomment, a quote will be displayed, but clicking the button to display the next quote does nothing. I can’t seem to figure out what is going wrong, when I read through it it all seems like it should work to me.
The second problem is I want to make the code more dynamic, so that if I were to add another quote, I wouldn’t have to change anything. This would involve, creating an array that has the number of every index in the array of quotes, which I currently have hard coded as ‘indicesLeft’ in the state. I guess that maybe that whole way of making sure the quotes don’t repeat is incorrect, in which case I guess I would have to start from scratch anyway.
Any help is appreciated, and let me know if I can clarify in any way.
let quoteNum=this.state.indicesLeft[ranNum];
This line sometimes works but sometimes doesn’t that’s why uncommenting block of codes is broken.
Can you figure it out?
Good luck 
Make the code dynamic first. You don’t need to store author name and quote text, the total length of the array all of that into your state.
You just need to know which quote you’re currently viewing (i.e the current index), that’s it.
You access the quote object by quotes[this.state.activeIndex] and you can access its quote and author property easily.
You handle the next quote by incrementing the index, and decrement the index if you want to handle the previous quote too. The code will become simpler and dynamic, as it always should be.
You will need to handle the edge cases, that whenever you increase the index of your state, make sure it never exceeds the max index that you have available.
(This approach doesn’t involve random accessing though if that’s what you’re looking for!)
I’m looking at it now and trying to figure it out, but wouldn’t that break the whole thing? Why does it work with the code commented out if the broken line is outside of the commented out part?