title: using async-await in react
body: <p>I've been browsing a lot of stack overflow questions about this subject, but I still don't get it...
  I'm trying this solution answering my problem very well : <a href="https://stackoverflow.com/a/42601915/2617419">https://stackoverflow.com/a/42601915/2617419</a></p>
  
  <p>Here is what I have :</p>
  
  <pre><code>class EnterpriseContainer extends Component {
      constructor(props) {
          super(props);
          this.state = {hit: props.hit};
      }
  
      async componentDidMount() {
          if (this.state.hit === undefined) {
              let h = await getObjectIDAsync();
              this.setState({hit: h});
          } else {
          }
      }
  
      render() {
          return (
              &lt;Grid item xs={12} sm={12} md={12} lg={12} xl={12}&gt;
                  &lt;Paper className="paper" elevation={1} style={{'paddingLeft': '0px'}}&gt;
  
                      &lt;Grid
                          container
                      &gt;
                          &lt;EnterpriseLogo image={this.state.hit.image}/&gt;
                          &lt;EnterpriseInfo hit={this.state.hit}/&gt;
                      &lt;/Grid&gt;
                  &lt;/Paper&gt;
              &lt;/Grid&gt;
          );
      }
  }
  </code></pre>
  
  <p>I understand that this logic is made to first load the react components, and then asynchronisly load data into it.
  If I simply load the hit object as a stringify object (using <code>JSON.stringify(hit)</code>) into my component, it works fine.
  But the components <code>EnterpriseLogo</code> and <code>EnterpriseInfo</code> use the <code>hit</code> props referencing for example <code>props.hit.objectID</code>, and it will make the app crash because this ref doesn't exist yet.</p>
  
  <p>I think I have a design problem somewhere but I'm not sure where to go.</p>