title: React Js componentDidMount Ajax Call setstate does not update state
body: <pre><code>import React, { Component} from 'react';
  import { Route } from 'react-router';
  import axios from 'axios';
  
  class App extends Component {
     constructor(props) {
        super(props);
        this.state = {
           league: {
              teams: {
                 data: [],
                 loaded: false,
                 config: {
                    icon: true,
                    parentId: 'leftSideTreeView'
                 }
              },
              players: {
                 data: [],
                 loaded: false,
                 config: {
                    icon: true,
                    parentId: 'leftSideTreeView'
                 }
              },
              games: {
                 data: [],
                 loaded: false,
                 config: {
                    icon: true,
                    parentId: 'leftSideTreeView'
                 }
              },
              error: false
           }
        };
     }
  
     componentDidMount() {
        this.getTeamsHandler();
     }
  
     getTeamsHandler = () =&gt; {
        axios.get('/api/League/GetTeams')
        .then((response) =&gt; {
           let prevState = [...this.state.league.teams];
           prevState.data = response.data;
           prevState.loaded = true;
           this.setState({ teams: prevState });
        })
        .catch((error) =&gt; {
           this.setState({ error: error });
        });
     }
  
     renderTeamsHandler = () =&gt; {
        let games = this.state.league.games;
        let content = null;
        if (games.data.length &gt; 0) {
           content = games.data.map((team, index) =&gt; {
              return &lt;div key={index}&gt;{team.teamName}&lt;/div&gt;;
           });
        }
        return content;
     }
  
     render() {
        let Team = this.renderTeamsHandler();
        return (
           &lt;div&gt;
              {Team}
           &lt;/div&gt;
        );
     }
  }
  
  export default App;
  </code></pre>
  
  <p>The Ajax call does set data to <code>prevState.Data</code> but by the time it gets to rendering it, the state is the same as before the Ajax call. It is very confused as this all looks correct to me. Is it potentially async issue? If that is the case, why previously what I've done calls like this and had no issue at all.</p>
  
  <p>Thanks for any help in advance. </p>