title: React componentDidMount() initializing state
body: <p>Working on a small project in React, and I'm using Axios to grab information from an API that is tested working. The problem is when I pull in the data and try to update the component state, the values coming in from the API aren't getting filled into the state to be rendered in the component.</p>
  
  <p>I've been trying to get the data in the state like so:</p>
  
  <pre><code>  componentDidMount() {
      this.state.databases.forEach(d =&gt; {
        axios.get(`http://localhost:3204/customer/${d}/count`).then(value =&gt; {
          this.setState({ counts: this.state.counts.push(value.data) });
        });
      });
      console.log(this.state);
    }
  </code></pre>
  
  <p>a previous version was written like so:</p>
  
  <pre><code>componentDidMount() {
      let internalCounts = [];
      this.state.databases.forEach(d =&gt; {
          axios.get(`http://localhost:3204/customer/${d}/count`).then(value =&gt; {
              internalCounts.push(value.data);
          });
      });
      this.setState({count: internalCounts});
  }
  </code></pre>
  
  <p>Both situations end up with the same result. The state is never really updated with the new count array. I have the suspicion that this is due to the async nature of <code>Axios</code> <strong>and</strong> <code>setState</code>.</p>
  
  <p>What would be a simple, effective way to get these two to stop racing each other?</p>