title: Component rendering before ComponentDidMount and Axios sets the state
body: <p>Ok so in the render method I pass the gifs state to my GifList component the problem is when I try to use that array in that component thru props its saying that its undefined and upon further review I can see that the gifs property in the app's state is originally being passed as an empty array before the setState is setting it to the return value of my Axios call in the lifecycle hook because of Axios being async. How can I fix this issue??   </p>
  
  <pre><code>import React, { Component } from 'react';
  import axios from "axios";
  import styles from './App.css';
  
  import Header from './Components/Header/Header';
  import GifList from './Components/GifList/GifList';
  
  
  class App extends Component {
  
    state = {
      title: "Giphy Search App",
      gifs: []
    }
  
    componentDidMount() {
       axios.get("http://api.giphy.com/v1/gifs/search? q=funny+cat&amp;limit=20&amp;api_key=ms344CewNH5NEbybHwQifMZImoQfEQ38")
          .then((res) =&gt; {
            const arr = res.data.data;
            this.setState({ gifs: arr });
        });
    }
  
    render() { 
      return (
        &lt;div className={styles.app}&gt;
        &lt;Header title={this.state.title}/&gt;
        &lt;GifList gifList={this.state.gifs}/&gt;
      &lt;/div&gt;
    );
   }
  }
  
  export default App;
  </code></pre>