title: React async function is not a function
body: <p>In one of my components I have the following functions:</p>
  
  <pre><code>addNewIndicator(attrs = {}) {
    const value = attrs.value || 'Indicator'
    const type = attrs.type || 'Generic Type'
  
    this.createIndicator(value).then(
      console.log('Indicator Created.')
    )
  }
  
  async createIndicator(value) {
    await this.props.createIndicatorMutation({
      variables: {
        value
      },
      update: (store, { data: { indicator }} ) =&gt; {
        const data = store.readQuery({ query: INDICATOR_FEED_QUERY })
        data.indicatorFeed.splice(0, 0, indicator)
        store.writeQuery({
          query: INDICATOR_FEED_QUERY,
          data,
        })
      }
    })
  }
  </code></pre>
  
  <p><code>addNewIndicator()</code> is triggered on a button click. When it runs, I get the following error:</p>
  
  <blockquote>
    <p>TypeError: this.createIndicator is not a function</p>
  </blockquote>
  
  <p>It is pointing to this line:</p>
  
  <pre><code>this.createIndicator(value).then(
  </code></pre>
  
  <p>I've done quite a bit of Googling, but haven't been able to figure out why this is the case. My understanding is that async functions can be called like that, but perhaps I'm missing something. Sorry if this is a silly question, I'm still learning React!</p>
  
  <p>Also, I created the project using create-react-app and haven't modified it much other than adding some packages. Thanks for any help!</p>
  
  <p>Edit to add how it is called. It is called from a child component props:</p>
  
  <pre><code>&lt;Button primary onClick={this.handleAddSelectionClick}&gt;Add Selected As Indicator&lt;/Button&gt;
  </code></pre>
  
  <p>and handleAddSelectionClick:</p>
  
  <pre><code>handleAddSelectionClick = () =&gt; {
    ...snip...
    this.props.addNewIndicator({
      value: new_indicator_str,
    })
  }
  </code></pre>