title: this.state.data.map is not a function continues to show even though I have an array
body: <p>I'm receiving an object and pushing to an array. I can see the array in my console.log but still it refuses to map out the li's.</p>
  
  <p>What am I doing wrong?</p>
  
  <pre><code>state = {
      startDate: null,
      endDate: null,
      data: []
  }
  
  componentDidMount() {
      fetch('https://jsonplaceholder.typicode.com/posts/1')
          .then(response =&gt; response.json())
          .then(data =&gt;
              this.setState({ data: this.state.data.push(data) }),
              console.log(this.state.data)
          )
  }
  
  render() {
      return (
          &lt;div&gt;
              &lt;ul&gt;
              {this.state.data.map(item =&gt; (
                  &lt;li key={item.id}&gt;{item.id} - {item.title}&lt;/li&gt;
              )}
              &lt;/ul&gt;
          &lt;/div&gt;
      )
  }
  </code></pre>
  
  <p>Console.log:</p>
  
  <pre><code>[]
  0: {userId: 1, id: 1, title: "sunt aut facere repellat provident occaecati excepturi optio reprehenderit", body: "quia et suscipit↵suscipit recusandae consequuntur …strum rerum est autem sunt rem eveniet architecto"}
  length: 1
  </code></pre>