Greetings. I would like some feedback on my “Random Architect Quote Machine.”
Some questions about my project thus far:
Can you give me specific feedback about what should be included in my React state? Should it just be the random Index?
In the project hints, you mentioned about breaking down the app into multiple React components? Can you talk about how I should do that, instead of lumping everything together in one React component?
What part of the HTML should be included in the React Component (render() return()), and what part should be written straight in HTML? How do I make that distinction?
Math.random is really interesting. Because I’ve only provided 21 quotes, sometimes the same quote is displayed. Is there a way to make sure that the next quote displayed is not the same as the current one? (Is that just a Boolean statement, i.e. nextQuote != prevQuote?)
Thank you in advance. I know these are a lot of questions.
State is mutable data, that can change on interaction.
This is about minimalism.
If data is computable by using other data, then it doesn’t belong into state.
E.g. when you have quotes in your state, the count of the quotes doesn’t belong into state, because you can compute it from the quotes state.
There is a great section about that in the React Docs
Everything that should get rendered to the DOM goes into the return of the render function. Additional calculations go into the render function too, but not in the return:
// do some calculations
// what should get rendered
In your example, you don’t want to clutter the render function with your quotes. You can move them in a separate variable outside of the render. In a real project you would move them even in a separate file or an API.
I think nothing should be written in pure HTML in your example, because it just increases the complexity for a beginner.
Yes, that’s a viable solution. But it also increases the complexity of your code, because you have to keep track of the old quote. But that’s your own decision.