title: react js async function in a class
body: <p>I currently have a function called resetThenSet like so</p>
  
  <pre><code>resetThenSet = (id, arrayId, title) =&gt; {
    let size = [...this.state[arrayId]]
    blah blah blah
  }
  </code></pre>
  
  <p>This resetthenSet method is called from my render method like so:</p>
  
  <pre><code>        &lt;Dropdown
            title="Size"
            arrayId="selectProduct"
            list={this.state.selectProduct}
            resetThenSet={this.resetThenSet}
          /&gt;
  </code></pre>
  
  <p>Everything works.  I need to use async to be able to have another method inside of there await.  So I switch the resetThenset to this:</p>
  
  <pre><code>async resetThenSet(id, arrayId, title){
    let size = [...this.state[arrayId]]
    //blah blah blah
  }
  </code></pre>
  
  <p>This gives me an error in my console.</p>
  
  <pre><code>Invalid argument passed as callback. Expected a function. Instead received: [object Promise]
  </code></pre>
  
  <p>This appears to be something related to scope so I figured I would just add binding for it:</p>
  
  <pre><code>this.resetThenSet = resetThenSet.bind(this);
  </code></pre>
  
  <p>This gives me the error </p>
  
  <pre><code>resetThenSet is not defined
  </code></pre>
  
  <p>Is there a simple way to change a fat arrow function to be an async function in react?</p>
  
  <p>I checked this and it didn't help:
  <a href="https://stackoverflow.com/questions/36847282/how-can-i-use-async-await-in-a-es6-javascript-class">How can I use async/await in a es6 javascript class?</a></p>