Loading an array of objects from a JSON and storing in an interactive array (React)

JavaScript
5

That’s extremely helpful, thank you! I forgot to mention or explain why I wanted to be able to interact with the array. So my initial state looks like this:

constructor(props){
super(props);
this.state= {
loading: false,
text: ‘’,
author: ‘’,
color: ‘’,
quotesHistory: ,
quoteNumber: 0,
quotes:
};
}

However, according to the project the page should have a quote and author displayed on the first load. Will I be able to interact with the fetched data before rendering rather than going straight to the return statement?

edit

I have an additional question. I set my render to have an if-else statement returning “loading” if loading is true, or returning the JSX otherwise. If I call

{<p>{this.state.quotes}</p>}

inside my div, I get an output of ’ [object Object],[object Object], etc… '. I don’t understand why this happens? Shouldn’t it be able to just print out the array as is? Do I need to parse the json or something?

edit #2

I figured out how to interact with the data before rendering and returning. I defined componentWillMount() instead of componentDidMount() and used my quote generation function inside componentWillMount after the fetch completed. Thanks for your help! I’m still curious as to why when you print an array of objects it prints out as [object Object]?