Creating a method with fetch api-(The state doesn't work properly)-React

1

I declared a component’s state property as an empty array.

this.state = {
      quotes: []
}

Now i want fetch data from third party api and want to render on my page when it is first loaded.
So i called ComponentDidMount() method to do this and here i called getData() method.

getData() {
    fetch('https://api.quotable.io/quotes')
    .then(response => response.json())
    .then(data => {
      this.setState({
         quotes: data.results
      })
    })
    .catch(err => console.log(err))
  }

componentDidMount() {
    this.getData();
  }

This method works fine. But here is a problem within declaring an empty array on state.
The page is nothing showing.
Now the point is when i declaring within an array or many others it works fine.

this.state = {
quotes: [{id: 0, quote: 'lorem ipsum', author: 'lorem ipsum'}]}

This is working for this p element. Bt within an empty array it doesn’t, why???..

<p>{ this.state.quotes[index].quote }</p>
3

It doesn’t work because empty array doesn’t have .quote property on index item. Normally it’s solved by conditional rendering:

{quotes.length ? <QuoteList quotes /> : false}
4

Oho. That’s the fact.