I’m working on completing the Front End Libraries projects and I’m stuck. I’m building my random quote generator, but I have a few questions/issues:
My app stops rendering for some reason when I add some JavaScript variables before the return but after the render.
I’m unsure if the order I’m passing props makes sense. I’ve created an object that holds my quote and their authors (going to change that to attribution, but want to get it working first). I have a button to create a random index in my state. I then pass that random index as a prop to a child component where I am trying to assign the quote and author to variable that I then display in the return.
Remember that the render() function does only one job - it takes JSX and transpile it to specific JS. It is very limited. For example, you cannot use if-else statements there or declare variables. In your case, I would store quoteBank outside of the components or in the RandomQuoteGenerator state as you probably will make an async call to the API to fetch this data later and write it to the state. Right?
Every one of us thinks differently. As long as code works, gives expected result and can be easily maintained, it makes sense But I will try to explain my logic.
When I see your code, I can tell that RandomQuoteGenerator handles all the logic for your app and other components(Quote, NewQuoteButton) consume the data or events.
Consumers don’t need to know anything except their main responsibility. For example, the main responsibility of Quote is to render a quote that is provided. The main responsibility of the button is to run a callback on click. Right?
Your button does absolutely that, but Quote can be improved. Instead of passing quoteBank and index, why not to pass the quote itself? Quote doesn’t care about all the quotes but for only one.
Not really sure why you are passing RandomQuoteGenerator.quoteBank down to the child? I too would suggest you move the quoteBank array out of the components. It’s just static data (for now at least). You don’t even need to pass it down.
You should also consider what numbers the code Math.floor(Math.random() * 5) will generate and if that fits with the length of the array you have (remember arrays are zero-based). I’d also suggest you set the initial state to some valid index value just to get a starting quote (you can gen a random number on mount as well).
Thank you for the response. I wasn’t sure whether storing the quoteBank in state would be proper use of the state, but that was my initial thought. I’m hoping once I get it working to add redux to handle the state.
But I will try to explain my logic.