title: How can I make an axios get request wait before rendering my react component
body: <p>I have the following code:</p>
  
  <pre><code>import React from "react";
  import TextField from "@material-ui/core/TextField";
  import Autocomplete from "@material-ui/lab/Autocomplete";
  import axios from "axios";
  
  var config = {
    headers: {
      Accept: "application/json; odata=verbose",
      Authorization: "Bearer " + access_token,
    },
  };
  
  class Searchbar extends React.Component {
     async componentWillMount() {
      await axios.get(contracts, config).then((res) =&gt; {
        this.setState({ allContracts: res.data });
      });
    }
    render() {
  
      return (
        &lt;div className="searchbar_wrapper"&gt;
          &lt;Autocomplete
            freeSolo
            id="contract-search-bar"
            disableClearable
            options={contracts.map((option) =&gt; option.name)}
            onChange={(event, value) =&gt; {
            let selectedContractID =(value)
            }}
            renderInput={(params) =&gt; (
              &lt;TextField
                {...params}
                label="Search"
                margin="normal"
                variant="outlined"
                InputProps={{ ...params.InputProps, type: "search" }}
              /&gt;
            )}
          /&gt;
        &lt;/div&gt;
      );
    }
  }
  export default Searchbar;
  </code></pre>
  
  <p>I am using component will mount as I want this function to first make a call before rendering my component... the axios call will get a result like below:</p>
  
  <pre><code>    results = [
        { name: "aaa" },
        { name: "bb" },
        { name: "cccc" },
      ];
  </code></pre>
  
  <p>The result would be over 500 entries..</p>
  
  <p>The problem I have is when the component is rendering it keeps saying:</p>
  
  <pre><code>Cannot read property 'allContracts' of null
  </code></pre>
  
  <p>And the reason for this is because the axios function has not finished getting its results...</p>
  
  <p>Please let me know how I can delay rendering and wait for axios to first get results and then continue </p>